mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 06:28:37 +00:00
17 lines
31 KiB
JSON
17 lines
31 KiB
JSON
{
|
|
"$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 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 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 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 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 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 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 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 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 />\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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 />\n </Button>\n <Button size=\"icon-xs\" variant=\"secondary\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon-xs\" variant=\"ghost\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon-xs\" variant=\"link\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon-sm\" variant=\"secondary\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon-sm\" variant=\"ghost\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon-sm\" variant=\"link\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon\" variant=\"secondary\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Button>\n <Button size=\"icon\" variant=\"outline\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Button>\n <Button size=\"icon\" variant=\"ghost\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Button>\n <Button size=\"icon\" variant=\"destructive\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Button>\n <Button size=\"icon\" variant=\"link\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon-lg\" variant=\"secondary\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon-lg\" variant=\"ghost\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 />\n </Button>\n <Button size=\"icon-lg\" variant=\"link\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\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 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 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"
|
|
} |