Button Group

Related actions in one shape: Segmented, Attached or Toolbar. For a main action with a menu, use Split Button.

FreeWeb and Mobile5 variantsMotion

npx shadcn add @fetaui/button-group

Playground

Segmented

Attached

Toolbar

Kind

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/button-group

One choice from a few options. A card slides to the selected one.

Motion

Related actions joined as one shape. doneLabel confirms a click for 1.6 s.

Motion

The selected card slides on a spring.
Text labels draw on hover and wave on press, like Button.
Attached scales to 0.98 as one shape.
An Attached item with doneLabel holds it for 1.6 s after a click, so Download reads Downloaded. The old word blurs out, the new one draws in, and the button eases to the new width.
With reduced motion, the card jumps and labels stay still.

The Segmented card moves through one shared layout animation, so only the selected option draws it.
Attached width uses a native animation that leaves no inline width. It and its 1.6 s timer are cancelled on unmount.
Labels mount their letters only while they animate, as in Button.

Give your coding assistant the Markdown reference instead of screenshots.

Import from @/components/fetaui/button-group and pick a shape with kind: segmented, attached or toolbar.
label is required on every kind. It names the group for screen readers.
For a main action with a menu of related options, use Split Button (split-button). It takes Dropdown Menu entries and opens the menu itself.
Toolbar is always controlled: each item needs pressed and onPressedChange. Pass 'separator' between sets.
The demo's clicks only change local state. Wire up onClick, onValueChange and onPressedChange.