{
  "tag": "ed-button-group",
  "kind": "component",
  "summary": "Button groups can be used to group related buttons into sections.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button-group/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button-group/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-button"
  ],
  "use": [
    "A split button, offering Save with Save as and Save all beside it",
    "Text formatting actions such as Bold, Italic and Underline, or Align left, center and right"
  ],
  "notFor": [
    {
      "when": "Independent actions from different scopes — forcing them into a group creates false relationships",
      "instead": "standalone buttons separated by spacing"
    },
    {
      "when": "A selection that should persist visually",
      "instead": "[Radio Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio-group)'s button appearance (segmented control) for a quick filter or mode toggle, [Tabs](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-group) for switching between whole content views"
    },
    {
      "when": "A segmented control or a filter",
      "instead": "a [Radio Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio-group) with appearance=\"button\""
    }
  ],
  "rules": [
    {
      "id": "button-group/text-labels",
      "rule": "In toolbars and button groups, show a visible text label alongside the icon of every button — never icon-only.",
      "why": "Icon-only buttons are not acceptable in eurodata products: our usability research confirms users overlook and misuse icon-only controls, including experienced users who have worked with a product for years.",
      "check": "error"
    },
    {
      "id": "button-group/accessible-label",
      "rule": "Give every button group an accessible label that names its purpose."
    },
    {
      "id": "button-group/split-button",
      "rule": "Use a split button to consolidate a primary action with two or more rarely-different variants (save vs. save as vs. save all) only when one action is clearly more common than the others — never for site navigation or when the app is used infrequently."
    },
    {
      "id": "button-group/uniform-appearance",
      "rule": "Keep all buttons in a group at the same appearance and density — never mix visual styles (outlined next to accent next to plain) within one group.",
      "check": "error",
      "covered": true
    },
    {
      "id": "button-group/accent-limit",
      "rule": "Never use more than one accent / primary button inside a single group. The accent limit is Button's rule, [`button/one-accent-per-scope`](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button/usage#rule-button-one-accent-per-scope).",
      "check": "error"
    },
    {
      "id": "button-group/frequent-first",
      "rule": "Place the most frequently used action leftmost in horizontal groups."
    },
    {
      "id": "button-group/separate-destructive",
      "rule": "Separate destructive actions physically from non-destructive ones.",
      "check": "warning"
    },
    {
      "id": "button-group/overflow",
      "rule": "Move lower-priority actions to a \"More\" overflow menu when space runs short — never let the toolbar clip actions silently on resize without an overflow fallback.",
      "check": "error"
    },
    {
      "id": "button-group/consistent-order",
      "rule": "Maintain consistent button order across screens within the same module."
    },
    {
      "id": "button-group/vertical-orientation",
      "rule": "Never use a vertical orientation in complex or content-dense layouts."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended."
      },
      {
        "name": "orientation",
        "property": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'horizontal'",
        "description": "The button group's orientation."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [],
    "slots": [
      {
        "name": "",
        "description": "One or more `<ed-button>` elements to display in the button group."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "base",
        "description": "The component's base wrapper."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/button-group/button-group.js';",
  "react": {
    "component": "EdButtonGroup",
    "import": "import EdButtonGroup from '@eurodata/eurodata-ui/dist/react/button-group/index.js';"
  }
}