Core ElementsFree

Button Group

A row of connected buttons sharing borders and outer corners, for view switchers or segmented actions.

Usage

bash

npx wunderui-cli add button-group

Writes the source into your project with its dependencies and, on first use, the styles — see Installation.

Then import what you need:

tsx

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

Two icon buttons, the current one filled — click to switch.

Desktop, tablet or phone — one at a time.

Two buttons sharing one border for paging.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

A pill group as a segmented view switcher in a page header.

Checkout redesign

Prop	Type	Default
shape	"rounded" \| "pill"	"rounded"