Button Group

Joins related buttons, or a button and an input, into one control.

When to use

Join related actions of equal weight into one control, such as Previous and Next, or Copy and Download.
Attach a button to an input or a select, such as an endpoint field with a Test button.

When not to use

Picking a view or a pressed state: use Toggle Group, which shows which one is on.
Buttons or icons inside the input's border: use Input Group.
Unrelated actions that happen to sit side by side: use separate buttons with a gap.

Install

npx shadcn@latest add @clinia/button-group

https://

Anatomy

https://

Clinia rules

Only the outer corners stay rounded, and neighbours share one border, so the group reads as one control.
Use one button variant per group. Put at most one default button in it, and only when it's the main action on the view.
ButtonGroupText holds a fixed prefix or unit, such as https://. ButtonGroupSeparator divides buttons that share a fill.

Do and don't

Do group related actions of equal weight.

Don't group unrelated actions.

Do pick a view with Toggle Group, which shows the one that's on.

Don't pick a view with a button group, where nothing shows the current one.

States

default

hover

focus

vertical

Focus cells apply the component's focus-visible classes statically. Toggle the site theme to review both themes.

Accessibility

Built in

ButtonGroup renders role="group". Each button keeps its own Tab stop and focus ring, raised above its neighbours so it's never clipped.

Your responsibility

Name the group with aria-label when its purpose isn't clear from the buttons, such as Pagination.
Give icon-only buttons an aria-label, and an input in the group a label or aria-label.

How to test

Press Tab: focus moves through each button in turn, and each shows the full Trust ring.
Press Enter or Space on each: it activates only that button.
With a screen reader, it announces the group name, if set, then each button by its label.

API

Prop	Values	Default	Description
orientation	`horizontalvertical`	`horizontal`	Stacks the buttons vertically when `vertical`.

All other props come from the native div element.