kitchen-sink-server/src/pages/categories/action/index.tsx

import { NextPage } from 'next';
import { ButtonSize, ButtonVariant } from '@tesseract-design/web-base-button';
import * as Action from '@tesseract-design/web-action-react';
import { DefaultLayout } from 'src/components/DefaultLayout';

const ActionPage: NextPage = () => {
  return (
    <DefaultLayout
      title="Action"
    >
      <main className="mt-8 mb-16 md:mt-16 md:mb-32">
        <section>
          <div className="container mx-auto px-4">
            <h1>
              ActionButton
            </h1>
            <div>
              <section>
                <h2>Variants</h2>
                <div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Action.ActionButton
                        block
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        variant={ButtonVariant.FILLED}
                        block
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        border
                        block
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        border
                        variant={ButtonVariant.FILLED}
                        block
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        disabled
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        variant={ButtonVariant.FILLED}
                        block
                        disabled
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        border
                        block
                        disabled
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        border
                        variant={ButtonVariant.FILLED}
                        block
                        disabled
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Sizes</h2>
                <div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Action.ActionButton
                        block
                        border
                        size={ButtonSize.SMALL}
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.SMALL}
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        border
                        size={ButtonSize.MEDIUM}
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.MEDIUM}
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        border
                        size={ButtonSize.LARGE}
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.LARGE}
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Compact</h2>
                <div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Action.ActionButton
                        block
                        compact
                        border
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        compact
                        border
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        compact
                        border
                        size={ButtonSize.SMALL}
                        subtext={
                          <>
                            Subtext
                          </>
                        }
                      >
                        Button
                      </Action.ActionButton>
                    </div>
                    <div>
                      <Action.ActionButton
                        block
                        compact
                        border
                        variant={ButtonVariant.FILLED}
                        size={ButtonSize.SMALL}
                        subtext={
                          <>
                            Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow
                          </>
                        }
                      >
                        Very Long Line of Text That Spans More Than The Component Width For Testing Overflow
                      </Action.ActionButton>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
      </main>
    </DefaultLayout>
  )
}

export default ActionPage