{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-story",
  "title": "Button Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating button component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/ui/button-story/button-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { Loader2, Mail } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\n\n/**\n * Displays a button or a component that looks like a button.\n */\nconst meta: Meta<typeof Button> = {\n  title: \"ui/base/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n  argTypes: {\n    variant: {\n      control: \"select\",\n      options: [\n        \"default\",\n        \"destructive\",\n        \"outline\",\n        \"secondary\",\n        \"ghost\",\n        \"link\",\n      ],\n    },\n    size: {\n      control: \"select\",\n      options: [\n        \"default\",\n        \"xs\",\n        \"sm\",\n        \"lg\",\n        \"icon\",\n        \"icon-xs\",\n        \"icon-sm\",\n        \"icon-lg\",\n      ],\n      if: { arg: \"variant\", neq: \"link\" },\n    },\n    children: {\n      control: \"text\",\n    },\n    disabled: {\n      control: \"boolean\",\n    },\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n  args: {\n    variant: \"default\",\n    size: \"default\",\n    children: \"Button\",\n    disabled: false,\n  },\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the button, used for primary actions and commands.\n */\nexport const Default: Story = {};\n\n/**\n * Use the `outline` button to reduce emphasis on secondary actions, such as\n * canceling or dismissing a dialog.\n */\nexport const Outline: Story = {\n  args: {\n    variant: \"outline\",\n  },\n};\n\n/**\n * Use the `ghost` button is minimalistic and subtle, for less intrusive\n * actions.\n */\nexport const Ghost: Story = {\n  args: {\n    variant: \"ghost\",\n  },\n};\n\n/**\n * Use the `secondary` button to call for less emphasized actions, styled to\n * complement the primary button while being less conspicuous.\n */\nexport const Secondary: Story = {\n  args: {\n    variant: \"secondary\",\n  },\n};\n\n/**\n * Use the `destructive` button to indicate errors, alerts, or the need for\n * immediate attention.\n */\nexport const Destructive: Story = {\n  args: {\n    variant: \"destructive\",\n  },\n};\n\n/**\n * Use the `link` button to reduce emphasis on tertiary actions, such as\n * hyperlink or navigation, providing a text-only interactive element.\n */\nexport const Link: Story = {\n  args: {\n    variant: \"link\",\n  },\n};\n\n/**\n * Add the `disabled` prop to a button to prevent interactions and add a\n * loading indicator, such as a spinner, to signify an in-progress action.\n */\nexport const Loading: Story = {\n  render: (args) => (\n    <Button {...args}>\n      <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n      Button\n    </Button>\n  ),\n  args: {\n    ...Outline.args,\n    disabled: true,\n  },\n};\n\n/**\n * Add an icon element to a button to enhance visual communication and\n * providing additional context for the action.\n */\nexport const WithIcon: Story = {\n  render: (args) => (\n    <Button {...args}>\n      <Mail className=\"mr-2 h-4 w-4\" /> Login with Email Button\n    </Button>\n  ),\n  args: {\n    ...Secondary.args,\n  },\n};\n\n/**\n * Use the `sm` size for a smaller button, suitable for interfaces needing\n * compact elements without sacrificing usability.\n */\nexport const Small: Story = {\n  args: {\n    size: \"sm\",\n  },\n};\n\n/**\n * Use the `lg` size for a larger button, offering better visibility and\n * easier interaction for users.\n */\nexport const Large: Story = {\n  args: {\n    size: \"lg\",\n  },\n};\n\n/**\n * Use the \"icon\" size for a button with only an icon.\n */\nexport const Icon: Story = {\n  args: {\n    ...Secondary.args,\n    size: \"icon\",\n    title: \"Mail\",\n    children: <Mail />,\n  },\n};\n\n/**\n * Use the `icon-sm` size for a smaller icon-only button.\n */\nexport const IconSmall: Story = {\n  args: {\n    variant: \"secondary\",\n    size: \"icon-sm\",\n    title: \"Mail\",\n    children: <Mail />,\n  },\n};\n\n/**\n * Use the `icon-lg` size for a larger icon-only button.\n */\nexport const IconLarge: Story = {\n  args: {\n    variant: \"secondary\",\n    size: \"icon-lg\",\n    title: \"Mail\",\n    children: <Mail />,\n  },\n};\n\n/**\n * Add the `disabled` prop to prevent interactions with the button.\n */\nexport const Disabled: Story = {\n  args: {\n    disabled: true,\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "button",
    "interaction"
  ],
  "type": "registry:file"
}