Button Group

ButtonGroup lays out related Buttons as one connected unit, merging their borders and rounding only the outer corners. Add ButtonGroupSeparator to divide actions and ButtonGroupText for an inline, non-interactive label.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: button-group.tsx

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
  Button,
} from "@beacon/design-system";

// Connected segmented actions
<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

// With a divider between distinct actions
<ButtonGroup>
  <Button variant="outline">Save</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Discard</Button>
</ButtonGroup>

// With an inline label
<ButtonGroup>
  <ButtonGroupText>Sort by:</ButtonGroupText>
  <Button variant="outline">Name</Button>
  <Button variant="outline">Date</Button>
</ButtonGroup>

Parts

Part	Story	Role
ButtonGroup	Default	Container that connects its child buttons.
ButtonGroupSeparator	With Separator	Visual divider between actions.
ButtonGroupText	With Text	Inline, non-interactive label inside the group.

When to use

• Mutually related actions that belong together (alignment, sort order, view toggles).
• Toolbar clusters where buttons should read as one control rather than scattered actions.

Do not use it for a list of unrelated actions; keep those as separate Buttons with normal spacing. For a single multi-action button, use a pull-down button instead.