Button Group

Groups related buttons together with consistent spacing and shared borders.

$bunx shadcn@latest add @nx-ui/button-group
Registry item
Installs withseparatorutils
Used byai-messagemap-view

Basic usage

Adjacent buttons share borders and collapse into a single control.

Orientation

Groups can stack vertically as well as run horizontally.

Mixed content

Combine buttons with ButtonGroupText labels and a ButtonGroupSeparator to build compound controls, such as a filtered search bar for waste transfer notes.

Site

With a dropdown

Pair a split action with a menu trigger for secondary options.

Disabled states

Individual buttons can be disabled while the rest of the group stays interactive.

API reference

Exported parts and their props, extracted from the component source.