Shadcn Button Group

A button group fuses related buttons into one control. Borders collapse, only the outer corners stay rounded, and the focused ring sits on top. Use it for Archive/Report, a split Save, or an input with a search button.

Usage

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

orientation is horizontal by default. Nest groups when you want a gap between clusters.

Composition

Orientation

orientation="vertical" stacks them. Borders collapse on the top and bottom.

Size

size lives on each Button — sm, default, lg. Match icon-sm / icon / icon-lg on the plus.

Nested

A ButtonGroup of ButtonGroups gets a gap. Clusters stay fused; the clusters themselves space out.

Separator

ButtonGroupSeparator between non-outline buttons. Outline already has a border.

Split

Primary action plus an icon button, separator in the middle.

Input

The Input stretches. The search button fuses to the end.

Input Group

Wrap an Input Group when the field needs its own addons.

Dropdown Menu

Follow plus a chevron that opens extra actions.

Select

A currency Select fused to an amount input.

Popover

Copilot plus a chevron that opens a Popover form.

RTL

Wrap with DirectionProvider and dir="rtl". The back arrow flips.

API

ButtonGroupSeparator

ButtonGroupText

ButtonGroup is a div with role="group". ButtonGroupSeparator is a Separator.

Notes

Icon-only groups need aria-label on the ButtonGroup and on each button.

With other components

Questions

Related