Core ElementsFree

Button Group

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

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import { ButtonGroup } from "@wunderui/react"

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"