{
  "_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-foundation.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"
      }
    },
    "children": [
      {
        "name": "buttons",
        "description": "Collection of grouped buttons. For base, each button (or overflow trigger wrapper) is a direct child of root. For list and row, each button (or overflow trigger wrapper) is wrapped in an <li> item.",
        "repeats": true,
        "restrict": [
          "button",
          "li",
          "div"
        ],
        "slot": {
          "name": "default",
          "restrict": [
            "Button"
          ],
          "required": true
        }
      },
      {
        "name": "item",
        "restrict": [
          "li"
        ],
        "description": "List item wrapper used in the list and row variants. Wraps a single grouped button or the overflow trigger.",
        "repeats": true,
        "renderWhen": {
          "prop": "variant",
          "eq": "list"
        }
      },
      {
        "name": "overflow",
        "restrict": [
          "div"
        ],
        "description": "Overflow menu trigger for additional actions that don't fit in the visible group.",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "overflow"
        },
        "children": [
          {
            "name": "overflowTrigger",
            "restrict": [
              "button"
            ],
            "description": "Button that opens the overflow menu.",
            "attributes": {
              "static": {
                "aria-haspopup": "true"
              },
              "bound": {
                "aria-expanded": {
                  "prop": "isOpen"
                }
              }
            },
            "children": [
              {
                "name": "overflowTriggerIcon",
                "restrict": [
                  "svg"
                ],
                "description": "Icon glyph rendered inside the overflow trigger button.",
                "attributes": {
                  "static": {
                    "aria-hidden": "true"
                  }
                }
              },
              {
                "name": "overflowTriggerAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually-hidden label for the overflow trigger button."
              }
            ]
          },
          {
            "name": "overflowMenu",
            "restrict": [
              "div"
            ],
            "description": "Dropdown panel that contains the overflow menu items.",
            "renderWhen": {
              "prop": "isOpen",
              "eq": "true"
            },
            "children": [
              {
                "name": "overflowMenuItems",
                "restrict": [
                  "ul"
                ],
                "description": "List of overflow menu items.",
                "attributes": {
                  "static": {
                    "role": "menu"
                  }
                },
                "children": [
                  {
                    "name": "overflowMenuItem",
                    "restrict": [
                      "li"
                    ],
                    "description": "Individual overflow menu item.",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "role": "presentation"
                      }
                    },
                    "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."
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "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."
      }
    ]
  }
}