{
  "name": "split-button",
  "title": "Split Button",
  "description": "Primary action plus a chevron menu: shares Button variants, hairline divider, float glass menu. SplitButtonItem for rows.",
  "category": "actions",
  "install": {
    "command": "npx shadcn@latest add @clow/split-button",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "variant": {
      "type": "select",
      "options": [
        "default",
        "glow",
        "outline",
        "ghost",
        "destructive"
      ],
      "default": "default",
      "description": "Shared with Button."
    },
    "size": {
      "type": "select",
      "options": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md",
      "description": "Shared with Button (no icon size)."
    }
  },
  "agent": {
    "prompt": "Use SplitButton when the primary click should run the main action and the chevron opens secondary actions. Pass menu as SplitButtonItem children (or any Base UI Menu items). variant/size match Button. Do not nest another Button inside.",
    "examples": [
      "<SplitButton onClick={deploy} menu={<><SplitButtonItem>Staging</SplitButtonItem></>}>Deploy</SplitButton>"
    ]
  },
  "dependencies": [
    "@base-ui/react",
    "iconsax-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils",
    "button"
  ],
  "links": {
    "docs": "https://clow.cards/docs/split-button",
    "markdown": "https://clow.cards/llms/split-button.md",
    "registryItem": "https://clow.cards/r/split-button.json"
  }
}
prop	type	default
variant	default \| glow \| outline \| ghost \| destructive	default
size	sm \| md \| lg	md
Draw

Playground

Examples

Props
