button-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-example",
  "title": "Button",
  "registryDependencies": [
    "button",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-lyra/examples/button-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}