{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "button-group",
  "name": "Button group",
  "category": "Actions",
  "description": "Joins related buttons into one control, horizontally or vertically.",
  "tags": [
    "button group",
    "segmented",
    "toolbar",
    "split button"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "joined buttons",
      "segmented buttons",
      "split button",
      "toolbar buttons"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "toggle-group"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/button-group",
  "markdownUrl": "https://mian.ro/ai/components/button-group.md",
  "classes": [
    {
      "name": "mn-btn-group",
      "description": "Container. Merges the radii of its children."
    },
    {
      "name": "mn-btn-group-vertical",
      "description": "Stacks the buttons."
    }
  ],
  "accessibility": [
    "Wrap with role=\"group\" and an aria-label so the relationship is announced.",
    "For a single-choice toggle use Toggle group instead."
  ],
  "examples": [
    {
      "title": "Outline group",
      "description": null,
      "html": "<div class=\"mn-btn-group\" role=\"group\" aria-label=\"Pagination\">\n  <button class=\"mn-btn mn-btn-outline\">Previous</button>\n  <button class=\"mn-btn mn-btn-outline\">Today</button>\n  <button class=\"mn-btn mn-btn-outline\">Next</button>\n</div>"
    },
    {
      "title": "Split button",
      "description": null,
      "html": "<div class=\"mn-btn-group\" role=\"group\" aria-label=\"Save\">\n  <button class=\"mn-btn\">Save changes</button>\n  <button class=\"mn-btn mn-btn-icon\" aria-label=\"More save options\" popovertarget=\"split-menu\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></button>\n</div>\n<div class=\"mn-menu\" popover id=\"split-menu\" data-placement=\"bottom-end\">\n  <button class=\"mn-menu-item\">Save as draft</button>\n  <button class=\"mn-menu-item\">Save and publish</button>\n</div>"
    },
    {
      "title": "Vertical",
      "description": null,
      "html": "<div class=\"mn-btn-group mn-btn-group-vertical\" role=\"group\" aria-label=\"Zoom\">\n  <button class=\"mn-btn mn-btn-outline mn-btn-icon\" aria-label=\"Zoom in\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></button>\n  <button class=\"mn-btn mn-btn-outline mn-btn-icon\" aria-label=\"Zoom out\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"/></svg></button>\n</div>"
    }
  ],
  "css": ".mn-btn-group { display: inline-flex; isolation: isolate; }\n.mn-btn-group > .mn-btn { border-radius: 0; box-shadow: none; }\n.mn-btn-group > .mn-btn:focus-visible { z-index: 1; }\n.mn-btn-group > .mn-btn:first-child { border-start-start-radius: var(--mn-radius-field); border-end-start-radius: var(--mn-radius-field); }\n.mn-btn-group > .mn-btn:last-child  { border-start-end-radius: var(--mn-radius-field); border-end-end-radius: var(--mn-radius-field); }\n.mn-btn-group > .mn-btn-outline + .mn-btn-outline { margin-inline-start: calc(var(--mn-border-w) * -1); }\n.mn-btn-group > .mn-btn:not(.mn-btn-outline) + .mn-btn:not(.mn-btn-outline) { border-inline-start: 1px solid color-mix(in oklab, var(--_fg) 25%, transparent); }\n.mn-btn-group-vertical { flex-direction: column; }\n.mn-btn-group-vertical > .mn-btn:first-child { border-radius: var(--mn-radius-field) var(--mn-radius-field) 0 0; }\n.mn-btn-group-vertical > .mn-btn:last-child { border-radius: 0 0 var(--mn-radius-field) var(--mn-radius-field); }\n.mn-btn-group-vertical > .mn-btn-outline + .mn-btn-outline { margin: calc(var(--mn-border-w) * -1) 0 0; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/button-group.json"
  }
}