Button Group

Actions

Joins multiple buttons into a single, connected control.

A button group renders a role="group" container and joins its child buttons by removing the inner borders and rounding only the outer corners. Pass size or variant once and it is applied to every child button that does not set its own.

npx shadcn@latest add button-group

Variants

Default and outline button groups for segmented controls.

Preview

Live

tsx

1<ButtonGroup>
2  <Button>Day</Button>
3  <Button>Week</Button>
4  <Button>Month</Button>
5</ButtonGroup>
6
7<ButtonGroup variant="outline">
8  <Button>Day</Button>
9  <Button>Week</Button>
10  <Button>Month</Button>
11</ButtonGroup>

Sizes

The size prop is spread onto each child button.

Preview

Live

tsx

1<ButtonGroup size="sm">
2  <Button>Undo</Button>
3  <Button>Redo</Button>
4</ButtonGroup>
5
6<ButtonGroup>
7  <Button>Undo</Button>
8  <Button>Redo</Button>
9</ButtonGroup>
10
11<ButtonGroup size="lg">
12  <Button>Undo</Button>
13  <Button>Redo</Button>
14</ButtonGroup>

Icon buttons

Icon-only children stay square and share the connected corners.

Preview

Live

tsx

1<ButtonGroup variant="outline">
2  <Button size="icon" aria-label="Bold">
3    <Bold />
4  </Button>
5  <Button size="icon" aria-label="Italic">
6    <Italic />
7  </Button>
8  <Button size="icon" aria-label="Underline">
9    <Underline />
10  </Button>
11</ButtonGroup>
12
13<ButtonGroup>
14  <Button size="icon" aria-label="Zoom in">
15    <ZoomIn />
16  </Button>
17  <Button size="icon" aria-label="Zoom out">
18    <ZoomOut />
19  </Button>
20  <Button size="icon" aria-label="Reset zoom">
21    <X />
22  </Button>
23</ButtonGroup>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
variant	ButtonProps["variant"]	Variant applied to child buttons that do not set their own.
size	ButtonProps["size"]= "default"	Size applied to child buttons that do not set their own.
children	React.ReactNode	One or more Button elements to join together.
className	string	Additional classes for the group container.