{
  "element": "nve-button-group",
  "entrypoint": "@nvidia-elements/core/button-group/button-group.examples.json",
  "items": [
    {
      "id": "button-group",
      "name": "Default",
      "template": "<nve-button-group>\n  <nve-icon-button selected icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n",
      "summary": "Basic button group for organizing related actions into a unified control with connected visual appearance.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-group-single-select",
      "name": "SingleSelect",
      "template": "<nve-button-group behavior-select=\"single\">\n  <nve-icon-button pressed container=\"flat\" icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"bars-4\"></nve-icon-button>\n</nve-button-group>\n",
      "summary": "Button group with single selection behavior for mutually exclusive options like view modes or formatting.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-group-multi-select",
      "name": "MultiSelect",
      "template": "<nve-button-group behavior-select=\"multi\">\n  <nve-icon-button pressed container=\"flat\" icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n  <nve-icon-button pressed container=\"flat\" icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n</nve-button-group>\n",
      "summary": "Button group with multi-selection behavior for toggling many options simultaneously like text formatting.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-group-disabled",
      "name": "Disabled",
      "template": "<nve-button-group container=\"rounded\">\n  <nve-button disabled>button</nve-button>\n  <nve-divider orientation=\"vertical\"></nve-divider>\n  <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\" disabled></nve-icon-button>\n</nve-button-group>\n",
      "summary": "Button group in disabled state for indicating unavailable actions or read-only contexts.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "button-group-flat",
      "name": "Flat",
      "template": "<nve-button-group container=\"flat\">\n  <nve-icon-button pressed icon-name=\"split-vertical\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n</nve-button-group>\n",
      "summary": "Button group with flat container styling for minimal visual appearance and reduced emphasis.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-group-action",
      "name": "Action",
      "template": "<nve-button-group>\n  <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n",
      "summary": "Button group for clustering related action buttons with cohesive visual treatment.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-group-action-split",
      "name": "ActionSplit",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button-group>\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n\n  <nve-button-group interaction=\"emphasis\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n\n  <nve-button-group interaction=\"destructive\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n</div>\n",
      "summary": "Split button groups with different interaction styles for primary actions with dropdown alternatives.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "button-group-action-split-rounded",
      "name": "ActionSplitRounded",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button-group container=\"rounded\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n\n  <nve-button-group container=\"rounded\" interaction=\"emphasis\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n\n  <nve-button-group container=\"rounded\" interaction=\"destructive\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n</div>\n",
      "summary": "Split button groups with rounded container styling for softer visual appearance and modern aesthetics.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "button-group-rounded",
      "name": "Rounded",
      "template": "<nve-button-group container=\"rounded\" behavior-select=\"single\">\n  <nve-button pressed>All Time</nve-button>\n  <nve-button>30 Days</nve-button>\n  <nve-button>90 Days</nve-button>\n</nve-button-group>\n",
      "summary": "Rounded button group with single selection for segmented controls and filter options with pill-style buttons.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-group-rounded-icon",
      "name": "RoundedIcon",
      "template": "<nve-button-group container=\"rounded\" behavior-select=\"single\">\n  <nve-icon-button icon-name=\"table\"></nve-icon-button>\n  <nve-icon-button icon-name=\"image\"></nve-icon-button>\n</nve-button-group>\n",
      "summary": "Rounded button group with icon buttons for compact view switchers and mode toggles.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-group-orientation-vertical",
      "name": "OrientationVertical",
      "template": "<nve-button-group orientation=\"vertical\">\n  <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n",
      "summary": "Button group with vertical orientation for sidebars, toolbars, or vertical navigation contexts.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}