defgov/apps/vite-project/src/gallery/ButtonGallery.tsx

import { Button, DownloadSvg } from "@defgov/ui-web-tw";
import { InnerWrapper } from "../common/InnerWrapper";
import { OuterWrapper } from "../common/OuterWrapper";

export const ButtonGallery = () => {
  return (
    <OuterWrapper>
      <InnerWrapper>
        <Button size="xs">xsmall</Button>
        <Button size="xs" iconSvg={<DownloadSvg />}>
          xsmall
        </Button>
        <Button size="xs" iconSvg={<DownloadSvg />} iconOnly={true}>
          xsmall
        </Button>
        <Button size="sm">small</Button>
        <Button size="sm" iconSvg={<DownloadSvg />}>
          small
        </Button>
        <Button size="sm" iconSvg={<DownloadSvg />} iconOnly={true}>
          small
        </Button>
      </InnerWrapper>
      <InnerWrapper>
        <Button size="md">medium</Button>
        <Button size="md" iconSvg={<DownloadSvg />}>
          medium
        </Button>
        <Button size="md" iconSvg={<DownloadSvg />} iconOnly={true}>
          medium
        </Button>
        <Button size="lg">large</Button>
        <Button size="lg" iconSvg={<DownloadSvg />}>
          large
        </Button>
        <Button size="lg" iconSvg={<DownloadSvg />} iconOnly={true}>
          large
        </Button>
      </InnerWrapper>
      <InnerWrapper>
        <Button size="xs" variant="outline">
          xsmall
        </Button>
        <Button size="xs" variant="outline" iconSvg={<DownloadSvg />}>
          xsmall
        </Button>
        <Button
          size="xs"
          variant="outline"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          xsmall
        </Button>
        <Button size="sm" variant="outline">
          small
        </Button>
        <Button size="sm" variant="outline" iconSvg={<DownloadSvg />}>
          small
        </Button>
        <Button
          size="sm"
          variant="outline"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          small
        </Button>
      </InnerWrapper>
      <InnerWrapper>
        <Button size="md" variant="outline">
          medium
        </Button>
        <Button size="md" variant="outline" iconSvg={<DownloadSvg />}>
          medium
        </Button>
        <Button
          size="md"
          variant="outline"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          medium
        </Button>
        <Button size="lg" variant="outline">
          large
        </Button>
        <Button size="lg" variant="outline" iconSvg={<DownloadSvg />}>
          large
        </Button>
        <Button
          size="lg"
          variant="outline"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          large
        </Button>
      </InnerWrapper>
      <InnerWrapper>
        <Button size="xs" variant="subtle">
          xsmall
        </Button>
        <Button size="xs" variant="subtle" iconSvg={<DownloadSvg />}>
          xsmall
        </Button>
        <Button
          size="xs"
          variant="subtle"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          xsmall
        </Button>
        <Button size="sm" variant="subtle">
          small
        </Button>
        <Button size="sm" variant="subtle" iconSvg={<DownloadSvg />}>
          small
        </Button>
        <Button
          size="sm"
          variant="subtle"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          small
        </Button>
      </InnerWrapper>
      <InnerWrapper>
        <Button size="md" variant="subtle">
          medium
        </Button>
        <Button size="md" variant="subtle" iconSvg={<DownloadSvg />}>
          medium
        </Button>
        <Button
          size="md"
          variant="subtle"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          medium
        </Button>
        <Button size="lg" variant="subtle">
          large
        </Button>
        <Button size="lg" variant="subtle" iconSvg={<DownloadSvg />}>
          large
        </Button>
        <Button
          size="lg"
          variant="subtle"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          large
        </Button>
      </InnerWrapper>
      {/* ------------------------------------- */}
      <InnerWrapper>
        <Button size="xs" variant="ghost">
          xsmall
        </Button>
        <Button size="xs" variant="ghost" iconSvg={<DownloadSvg />}>
          xsmall
        </Button>
        <Button
          size="xs"
          variant="ghost"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          xsmall
        </Button>
        <Button size="sm" variant="ghost">
          small
        </Button>
        <Button size="sm" variant="ghost" iconSvg={<DownloadSvg />}>
          small
        </Button>
        <Button
          size="sm"
          variant="ghost"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          small
        </Button>
      </InnerWrapper>
      <InnerWrapper>
        <Button size="md" variant="ghost">
          medium
        </Button>
        <Button size="md" variant="ghost" iconSvg={<DownloadSvg />}>
          medium
        </Button>
        <Button
          size="md"
          variant="ghost"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          medium
        </Button>
        <Button size="lg" variant="ghost">
          large
        </Button>
        <Button size="lg" variant="ghost" iconSvg={<DownloadSvg />}>
          large
        </Button>
        <Button
          size="lg"
          variant="ghost"
          iconSvg={<DownloadSvg />}
          iconOnly={true}
        >
          large
        </Button>
      </InnerWrapper>
      <InnerWrapper>
        <Button variant="filled" brand="info">
          button
        </Button>
        <Button variant="outline" brand="info">
          button
        </Button>
        <Button variant="subtle" brand="info">
          button
        </Button>
        <Button variant="ghost" brand="info">
          button
        </Button>
      </InnerWrapper>
      <InnerWrapper>
        <Button variant="filled" disabled>
          button
        </Button>
        <Button variant="outline" disabled>
          button
        </Button>
        <Button variant="subtle" disabled>
          button
        </Button>
        <Button variant="ghost" disabled>
          button
        </Button>
      </InnerWrapper>
    </OuterWrapper>
  );
};