{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-states",
  "title": "Button: Sizes, loading and shortcuts",
  "description": "Keyboard hints, the loading state, icon buttons and every size.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.cuelark.com/r/button.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/examples/button-states.tsx",
      "content": "import * as React from \"react\";\nimport { ArrowRightIcon, PlusIcon, SearchIcon } from \"lucide-react\";\n\nimport { Button } from \"@/registry/cuelark/ui/button\";\n\nexport default function ButtonStates() {\n  const [saving, setSaving] = React.useState(false);\n\n  function save() {\n    setSaving(true);\n    setTimeout(() => setSaving(false), 1600);\n  }\n\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <div className=\"flex flex-wrap items-center justify-center gap-3\">\n        <Button variant=\"secondary\" kbd=\"⌘K\">\n          <SearchIcon />\n          Search\n        </Button>\n        <Button loading={saving} onClick={save}>\n          Save changes\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Add item\">\n          <PlusIcon />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center justify-center gap-3\">\n        <Button size=\"xs\">Extra small</Button>\n        <Button size=\"sm\">Small</Button>\n        <Button size=\"md\">Medium</Button>\n        <Button size=\"lg\">\n          Large\n          <ArrowRightIcon />\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "button",
    "example"
  ],
  "type": "registry:component"
}