{
  "name": "ButtonGroup",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ButtonGroup.tsx",
  "chapterTag": "03 Buttons & Controls",
  "chapter": "04-buttons-and-controls.html",
  "sectionId": "groups",
  "elName": "Button group + split",
  "demoUrl": "https://brand.magicblocks.ai/components/04-buttons-and-controls#groups",
  "hasLiveDemo": false,
  "description": "Adjacent buttons share corners and a single hairline. Wraps `.btn-group`.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "ButtonGroup",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ButtonGroupProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ButtonGroup } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "Two or more `<Button>` (or button-like) children rendered as a group."
    }
  ],
  "classesUsed": [
    "btn-group"
  ],
  "examples": {
    "react": "<ButtonGroup>\n  <Button variant=\"secondary\">Day</Button>\n  <Button variant=\"secondary\">Week</Button>\n  <Button variant=\"secondary\">Month</Button>\n</ButtonGroup>",
    "html": "<div class=\"btn-group\" role=\"group\">\n  <button class=\"btn btn-secondary\">Copy</button>\n  <button class=\"btn btn-secondary\">Edit</button>\n  <button class=\"btn btn-secondary\">Duplicate</button>\n</div>\n<div class=\"btn-split\">\n  <button class=\"btn btn-primary btn-split-main\">Continue</button>\n  <button class=\"btn btn-primary btn-split-icon\" aria-label=\"More options\">\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\n  </button>\n</div>",
    "css": ".btn-group { display: inline-flex; }"
  }
}