{
  "name": "button-group",
  "displayName": "Button group",
  "type": "custom",
  "isCustomElement": true,
  "tag": "l-button-group",
  "nativeTag": null,
  "selector": "l-button-group",
  "subItemOf": null,
  "summary": "Visually joins related `.l-button` elements into a single segmented\ncontrol. The joined appearance is pure CSS; this element adds the group\nsemantics (`role=\"group\"`, `aria-label`).",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/button-group",
    "js": "luxen-ui/button-group"
  },
  "properties": [
    {
      "name": "label",
      "attribute": "label",
      "type": "string | undefined",
      "default": null,
      "reflects": true,
      "description": "Accessible label announced for the group. Not displayed on screen."
    },
    {
      "name": "orientation",
      "attribute": "orientation",
      "type": "ButtonGroupOrientation",
      "default": "'horizontal'",
      "reflects": true,
      "description": "Layout direction of the buttons. Visual only (drives the CSS via the\nreflected attribute): ARIA 1.2 does not allow `aria-orientation` on\n`role=\"group\"`, so no ARIA attribute is set."
    }
  ],
  "attributes": [],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [],
  "cssParts": [],
  "cssProperties": [],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-button-group label=\"Alignment\">\n  <button class=\"l-button\">Left</button>\n  <button class=\"l-button\">Center</button>\n  <button class=\"l-button\">Right</button>\n</l-button-group>"
    }
  ]
}