ButtonGroup

Attached

The segments of an attached group stay square: the cut a Button takes on contact, and the one a primary button carries at rest, would notch the shared edges. A detached group leaves each button its own shape.

Detached

Vertical

Wrapping

A row of buttons that does not fit its container flows onto more rows and the group grows taller. Nothing is hidden and nothing scrolls. Attached segments keep their shared edges across rows, a hovered or focused segment is drawn above its neighbors, and the Tab order follows reading order. A vertical group already stacks.

In an attached group the segments take the height of the tallest segment in their row, so the shared edges run straight when one label wrapped and its neighbor's did not. In a detached group each button keeps its own height, like any button in a row.

If the group sits in a scroll region you provide, pass className="flex-nowrap" to keep it on one row.

Props

Accessibility

• Pass aria-label to name the group.
• Buttons retain keyboard activation and focus rings, including at shared borders.
• Buttons stay in reading order when the group wraps.

Manifest entry

<ButtonGroup>
  <Button>COPY</Button>
  <Button>PASTE</Button>
</ButtonGroup>

{
  "description": "Segmented row or column of Buttons with collapsed shared borders. A row that does not fit wraps onto more rows and grows taller, so no action is hidden; attached segments keep their shared edges across rows and take the height of the tallest segment in their row, so the edges run straight when one label wrapped; in a detached group each segment keeps its own height. A column stacks. Attached segments stay square: the group turns off the cut a Button otherwise carries.",
  "props": {
    "orientation": {
      "type": "enum",
      "values": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal"
    },
    "attached": {
      "type": "boolean",
      "default": true
    }
  },
  "slots": {
    "children": {
      "type": "Button",
      "required": true
    }
  },
  "composable_with": [
    "Toolbar",
    "CardFooter"
  ],
  "example": "<ButtonGroup>\n  <Button>COPY</Button>\n  <Button>PASTE</Button>\n</ButtonGroup>"
}