{
  "name": "button",
  "title": "Button",
  "description": "An ink button lit by natural light. Hover lifts it, press settles it, disabled turns the light off. The ember variant is for the one CTA that matters.",
  "category": "actions",
  "install": {
    "command": "npx shadcn@latest add @clow/button",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "variant": {
      "type": "select",
      "options": [
        "default",
        "glow",
        "outline",
        "ghost",
        "destructive"
      ],
      "default": "default",
      "description": "Visual emphasis. Use glow only for the single primary CTA per view."
    },
    "size": {
      "type": "select",
      "options": [
        "sm",
        "md",
        "lg",
        "icon"
      ],
      "default": "md"
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "children": {
      "type": "text",
      "default": "Initialize"
    }
  },
  "agent": {
    "prompt": "Use Button for actions. variant=default for primary actions, glow ONLY for the single most important CTA on the page, outline for secondary, ghost for tertiary/toolbar actions, destructive for irreversible actions (it deliberately does not glow).",
    "examples": [
      "<Button>Save changes</Button>",
      "<Button variant=\"glow\" size=\"lg\">Deploy now</Button>",
      "<Button variant=\"outline\">Cancel</Button>"
    ]
  },
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/button",
    "markdown": "https://clow.cards/llms/button.md",
    "registryItem": "https://clow.cards/r/button.json"
  }
}
prop	type	default
variant	default \| glow \| outline \| ghost \| destructive	default
size	sm \| md \| lg \| icon	md
disabled	boolean	false
children	text	Initialize
Draw

Playground

Examples

Props
