Button Group

Groups related buttons into a single connected cluster with shared edges, optionally divided by a separator or labelled with text.

Install

npx shadcn@latest add https://atomx.acau.net/r/button-group.json

Installing button-group also pulls in the Separator component, which ButtonGroupSeparator is built on.

Usage

ButtonGroup is a flex container that collapses the inner border-radius and borders of its children so they render as one connected unit — useful for toolbars, segmented actions, and split buttons. It works with Button, inputs, and other bordered controls.

Set orientation="vertical" to stack the group instead. Insert a ButtonGroupSeparator to divide subgroups, and use ButtonGroupText for a non-interactive label segment within the group.

<ButtonGroup>
  <Button variant="outline">Bold</Button>
  <Button variant="outline">Italic</Button>
  <Button variant="outline">Underline</Button>
</ButtonGroup>

Preview

Connected actions

With a text label

Vertical orientation

Props