Skip to main content

Function: ButtonGroup()

ButtonGroup(__namedParameters): Element

Defined in: components/ButtonGroup/ButtonGroup.tsx:236

Lays out a set of related actions with one rhythm, and collapses the row to a column when it no longer fits.

Entity = Structure → spacing: gap.inline.sm between siblings. It paints nothing and takes no colour: the actions carry the emphasis, the group carries only the arrangement.

The gap is not a prop, deliberately. Stack already offers a caller-picked gap; if this component took one too it would be a Stack preset. Its reason to exist is that the separation between sibling actions is one decision for the whole product, made by the theme — so every action row in every surface shares a rhythm. Both axes read the same token: a row that columnised because space ran out is still the same set of actions, not a new stacking rhythm, so the spacing does not change with the axis (this is the one place a Structure component deliberately does not follow Stack's inline/stack split).

What the group imposes on its children. Exactly one thing: grouped triggers stop shrinking. A trigger sets an explicit min-width (the hit floor), which overrides a flex item's automatic minimum size, so in a tight row it would squash below its own label. Holding the natural width is what makes the overflow real and therefore measurable. Delivered by context, so it reaches a Button wrapped in a Tooltip or a DialogTrigger too.

Keyboard. Plain tab order, no arrow-key layer: independent commitments should not be walked like a strip of tools. Reach for Toolbar when the set is a strip of tools operating on content.

No role is emitted: an unnamed role="group" adds screen-reader noise without adding meaning. Pass role/aria-label yourself when the cluster is genuinely a named region, or use Group for a labelled, painted frame.

Parameters​

ParameterType
__namedParametersButtonGroupProps

Returns​

Element

Example​

// Form footer: the pair pushes to the end, columnises when space runs out
<ButtonGroup align="end">
  <Button evaluation="secondary">Cancel</Button>
  <Button evaluation="primary">Save changes</Button>
</ButtonGroup>

// Fixed column — no measurement
<ButtonGroup orientation="vertical">
  <Button>Duplicate</Button>
  <Button evaluation="negative" consequence="destructive">Delete</Button>
</ButtonGroup>