{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "ButtonGroup",
  "description": "Creates button group container",
  "structure": {
    "name": "root",
    "restrict": [
      "div",
      "ul"
    ],
    "description": "Creates button group container",
    "attributes": {
      "static": {
        "role": "group",
        "class": "slds-button-group"
      }
    },
    "children": [
      {
        "name": "buttons",
        "description": "Each grouped button rendered as a <button> with slds-button plus a style modifier. In the base variant these are direct children of root; in the list and row variants they are wrapped in an <li>.",
        "repeats": true,
        "restrict": [
          "button",
          "li",
          "div"
        ],
        "slot": {
          "name": "default",
          "restrict": [
            "Button"
          ],
          "required": true
        },
        "attributes": {
          "static": {
            "class": "slds-button"
          }
        },
        "modifiers": [
          {
            "name": "first",
            "attribute": "class",
            "value": "slds-button_first",
            "description": "Explicitly style the first button in a button group"
          },
          {
            "name": "middle",
            "attribute": "class",
            "value": "slds-button_middle",
            "description": "Explicitly style buttons in the middle (i.e., not first or last) in a button group"
          },
          {
            "name": "last",
            "attribute": "class",
            "value": "slds-button_last",
            "description": "If the last button in the group is required to be wrapped in a div, apply this class to the div"
          },
          {
            "name": "selected",
            "attribute": "class",
            "value": "slds-is-selected",
            "description": "Applied to an icon-toggle button when it is in the pressed/selected state."
          }
        ],
        "variants": [
          {
            "name": "style",
            "description": "Visual style of the grouped button.",
            "default": "neutral",
            "options": [
              {
                "value": "neutral",
                "class": "slds-button_neutral"
              },
              {
                "value": "brand",
                "class": "slds-button_brand"
              },
              {
                "value": "inverse",
                "class": "slds-button_inverse"
              }
            ]
          },
          {
            "name": "icon",
            "description": "Icon-only button treatment. Applied alongside slds-button_icon to choose the icon button surface.",
            "options": [
              {
                "value": "borderFilled",
                "class": "slds-button_icon-border-filled"
              },
              {
                "value": "border",
                "class": "slds-button_icon-border"
              },
              {
                "value": "borderInverse",
                "class": "slds-button_icon-border-inverse"
              },
              {
                "value": "brand",
                "class": "slds-button_icon-brand"
              },
              {
                "value": "more",
                "class": "slds-button_icon-more"
              }
            ]
          }
        ],
        "children": [
          {
            "name": "buttonIcon",
            "description": "Icon glyph rendered inside an icon-only grouped button.",
            "attributes": {
              "static": {
                "class": "slds-button__icon"
              }
            },
            "modifiers": [
              {
                "name": "xSmall",
                "attribute": "class",
                "value": "slds-button__icon_x-small",
                "description": "Extra-small icon size; used for the down-arrow glyph on more-options icon buttons."
              }
            ]
          },
          {
            "name": "buttonAssistiveText",
            "description": "Visually-hidden label for icon-only grouped buttons.",
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ]
      },
      {
        "name": "item",
        "restrict": [
          "li"
        ],
        "description": "List item wrapper used in the list and row variants.",
        "repeats": true,
        "renderWhen": {
          "prop": "variant",
          "eq": "list"
        },
        "attributes": {
          "static": {}
        },
        "modifiers": [
          {
            "name": "rowItem",
            "attribute": "class",
            "value": "slds-button-group-item",
            "description": "Each item inside of a button group row that needs spacing applied to it"
          }
        ]
      },
      {
        "name": "overflow",
        "restrict": [
          "div"
        ],
        "description": "Overflow trigger wrapper. A <div> carrying slds-dropdown-trigger plus its click-mode and (typically) slds-button_last alignment hook.",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "overflow"
        },
        "children": [
          {
            "name": "overflowTrigger",
            "restrict": [
              "button"
            ],
            "description": "Trigger button that opens the overflow menu.",
            "attributes": {
              "static": {
                "aria-haspopup": "true",
                "class": "slds-button slds-button_icon"
              },
              "bound": {
                "aria-expanded": {
                  "prop": "isOpen"
                }
              }
            },
            "children": [
              {
                "name": "overflowTriggerIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Glyph rendered inside the overflow trigger.",
                "attributes": {
                  "static": {
                    "aria-hidden": "true",
                    "class": "slds-button__icon"
                  }
                },
                "modifiers": [
                  {
                    "name": "xSmall",
                    "attribute": "class",
                    "value": "slds-button__icon_x-small",
                    "description": "Extra-small icon size; used for the down-arrow glyph on more-options icon overflow triggers."
                  }
                ]
              },
              {
                "name": "overflowTriggerAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually-hidden label for the overflow trigger.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "variants": [
              {
                "name": "icon",
                "description": "Icon button surface for the overflow trigger.",
                "options": [
                  {
                    "value": "borderFilled",
                    "class": "slds-button_icon-border-filled"
                  },
                  {
                    "value": "border",
                    "class": "slds-button_icon-border"
                  },
                  {
                    "value": "borderInverse",
                    "class": "slds-button_icon-border-inverse"
                  },
                  {
                    "value": "brand",
                    "class": "slds-button_icon-brand"
                  },
                  {
                    "value": "more",
                    "class": "slds-button_icon-more"
                  }
                ]
              }
            ]
          },
          {
            "name": "overflowMenu",
            "restrict": [
              "div"
            ],
            "description": "Dropdown panel containing the overflow menu items.",
            "renderWhen": {
              "prop": "isOpen",
              "eq": "true"
            },
            "children": [
              {
                "name": "overflowMenuItems",
                "restrict": [
                  "ul"
                ],
                "description": "Menu items list.",
                "attributes": {
                  "static": {
                    "role": "menu",
                    "class": "slds-dropdown__list"
                  }
                },
                "children": [
                  {
                    "name": "overflowMenuItem",
                    "restrict": [
                      "li"
                    ],
                    "description": "Individual overflow menu item.",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "role": "presentation",
                        "class": "slds-dropdown__item"
                      }
                    },
                    "children": [
                      {
                        "name": "overflowMenuItemLink",
                        "restrict": [
                          "a"
                        ],
                        "description": "Interactive target inside the overflow menu item.",
                        "attributes": {
                          "static": {
                            "role": "menuitem"
                          }
                        },
                        "children": [
                          {
                            "name": "overflowMenuItemLabel",
                            "restrict": [
                              "span"
                            ],
                            "description": "Truncating label for the overflow menu item.",
                            "attributes": {
                              "static": {
                                "class": "slds-truncate"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-dropdown"
              }
            },
            "modifiers": [
              {
                "name": "actions",
                "attribute": "class",
                "value": "slds-dropdown_actions",
                "description": "Action-menu styling (compact action overflow)."
              }
            ],
            "variants": [
              {
                "name": "position",
                "description": "Dropdown alignment relative to its trigger.",
                "default": "right",
                "options": [
                  {
                    "value": "right",
                    "class": "slds-dropdown_right"
                  }
                ]
              }
            ]
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-dropdown-trigger slds-dropdown-trigger_click"
          }
        },
        "modifiers": [
          {
            "name": "last",
            "attribute": "class",
            "value": "slds-button_last",
            "description": "If the last button in the group is required to be wrapped in a div, apply this class to the div"
          },
          {
            "name": "clicked",
            "attribute": "class",
            "value": "slds-dropdown-trigger_clicked",
            "description": "Marks the trigger as having been clicked (focus-trapped activation state used by row icon overflows)."
          }
        ]
      }
    ],
    "variants": [
      {
        "name": "layout",
        "description": "Container shape and tag. The base variant renders a <div role='group'> with inline buttons; the list variant renders a <ul> with each button wrapped in an <li>; the row variant renders a <ul> with each <li> carrying slds-button-group-item.",
        "default": "base",
        "options": [
          {
            "value": "base",
            "class": "slds-button-group",
            "description": "Creates button group container"
          },
          {
            "value": "list",
            "class": "slds-button-group-list",
            "description": "Creates button group container for list items"
          },
          {
            "value": "row",
            "class": "slds-button-group-row",
            "description": "Creates button group container that provides spacing between each button"
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the overflow menu is open."
    },
    {
      "name": "disabled",
      "type": "boolean",
      "description": "Whether the grouped buttons are disabled."
    },
    {
      "name": "selected",
      "type": "boolean",
      "aria": "aria-pressed",
      "description": "Whether an individual grouped button is in a pressed/selected state (icon-toggle pattern)."
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "group-role",
        "description": "The base variant container must have role='group'."
      },
      {
        "id": "group-label",
        "description": "Button group should have an accessible label via aria-label or aria-labelledby."
      },
      {
        "id": "overflow-haspopup",
        "description": "The overflow trigger must have aria-haspopup='true' and aria-expanded reflecting its open state."
      },
      {
        "id": "icon-button-label",
        "description": "Icon-only grouped buttons must provide an accessible name via title plus visually-hidden assistive text."
      },
      {
        "id": "toggle-aria-pressed",
        "description": "Buttons that act as toggles (icon-group selected/unselected pattern) must carry aria-pressed reflecting their state."
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-button-group"
    }
  },
  "cssSource": "./buttonGroup.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "selected",
      "class": "slds-is-selected"
    }
  ]
}