{
  "name": "SplitButton",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SplitButton.tsx",
  "chapterTag": "03 Buttons & Controls",
  "chapter": "04-buttons-and-controls.html",
  "sectionId": "split-button",
  "elName": "Tones · primary and ghost",
  "demoUrl": "https://brand.magicblocks.ai/components/04-buttons-and-controls#split-button",
  "hasLiveDemo": false,
  "description": "Button with a primary action and a caret-menu of alternate modes\n(\"Send now\" + \"Schedule send\", \"Save\" + \"Save and publish\", etc).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SplitButton",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SplitButtonProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SplitButtonOption",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SplitButton } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Primary action label."
    },
    {
      "name": "onPrimaryClick",
      "optional": true,
      "type": "() => void",
      "doc": "Primary action click handler."
    },
    {
      "name": "options",
      "optional": true,
      "type": "SplitButtonOption[]",
      "doc": "Alternate options shown in the caret menu."
    },
    {
      "name": "tone",
      "optional": true,
      "type": "\"primary\" | \"neutral\" | \"danger\" | \"ghost\"",
      "doc": "Visual tone — mirrors `<Button>` tone vocabulary."
    },
    {
      "name": "size",
      "optional": true,
      "type": "\"sm\" | \"md\" | \"lg\"",
      "doc": "Size — mirrors `<Button>` sizing."
    },
    {
      "name": "caretLabel",
      "optional": true,
      "type": "string",
      "doc": "Aria-label for the caret menu trigger. Default `\"More send options\"`."
    }
  ],
  "classesUsed": [
    "menu",
    "split-button",
    "split-button-caret",
    "split-button-menu",
    "split-button-menu-caption",
    "split-button-menu-item",
    "split-button-menu-label",
    "split-button-primary"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"split-button-demo\">\n          <div class=\"split-button is-tone-primary is-size-md\">\n            <button type=\"button\" class=\"split-button-primary\">Send 1,248 SMS</button>\n            <button type=\"button\" class=\"split-button-caret\" aria-label=\"More send options\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M3 4.5l3 3 3-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <div class=\"split-button is-tone-ghost is-size-md\">\n            <button type=\"button\" class=\"split-button-primary\">Save</button>\n            <button type=\"button\" class=\"split-button-caret\" aria-label=\"More save options\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M3 4.5l3 3 3-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n        </div>",
    "css": ".menu {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  padding: var(--s-2);\n  display: flex; flex-direction: column; gap: 2px;\n  box-shadow: var(--sh-3);\n  min-width: 260px;\n}\n\n.split-button {\n  display: inline-flex;\n  position: relative;\n  isolation: isolate;\n}\n\n.split-button-caret {\n  appearance: none;\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font: 500 14px/1 var(--f-body);\n  transition: background var(--dur-2) var(--ease),\n              filter var(--dur-2) var(--ease);\n}\n.split-button-caret {\n  padding: 0 8px;\n  border-radius: 0 var(--r-md) var(--r-md) 0;\n}\n\n.split-button-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 50;\n  min-width: 220px;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 14%, transparent);\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.split-button-menu-caption { font-size: 12px; color: var(--fg-soft); }\n\n.split-button-menu-item {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  text-align: left;\n  padding: 8px 10px;\n  border-radius: var(--r-xs);\n  cursor: pointer;\n  color: var(--fg);\n  font: 400 13px/1.3 var(--f-body);\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.split-button-menu-label { font-weight: 500; }\n\n.split-button-primary {\n  appearance: none;\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font: 500 14px/1 var(--f-body);\n  transition: background var(--dur-2) var(--ease),\n              filter var(--dur-2) var(--ease);\n}\n.split-button-primary {\n  padding: 0 var(--s-4);\n  border-radius: var(--r-md) 0 0 var(--r-md);\n  border-right: 1px solid color-mix(in oklab, currentColor 18%, transparent);\n}"
  }
}