{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-demo",
  "type": "registry:component",
  "title": "Button example",
  "description": "Usage example (demo) for Button: the code behind the preview on https://facadeui.dev/components/button. Installs the items it uses.",
  "categories": [
    "example"
  ],
  "dependencies": [
    "lucide-react@^1.47.0"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/button.json"
  ],
  "files": [
    {
      "path": "button.tsx",
      "type": "registry:component",
      "target": "components/examples/button-demo.tsx",
      "content": "import { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button, buttonVariants } from \"@/components/ui/button\"\n\nexport function Demo() {\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <Button>Start building</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"link\">Link</Button>\n        <Button variant=\"destructive\">Delete</Button>\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <Button size=\"sm\">Small</Button>\n        <Button size=\"md\">Medium</Button>\n        <Button size=\"lg\">\n          Large\n          <ArrowRightIcon aria-hidden />\n        </Button>\n        <Button size=\"icon\" aria-label=\"Continue\">\n          <ArrowRightIcon aria-hidden />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <Button loading>Saving</Button>\n        <Button disabled>Disabled</Button>\n        {/* Links are styled with buttonVariants, never through `render`. */}\n        <a href=\"#demo\" className={buttonVariants({ variant: \"outline\" })}>\n          A real link\n        </a>\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "docs": "Example only: components/examples/button-demo.tsx renders Button with sample content from components/examples/content.tsx. Copy what you need into your page. Docs: https://facadeui.dev/components/button"
}