ButtonGroup

Stripe ButtonGroup

Two shapes, one look. Pass outline Buttons as children and they join into one group that arrow keys move through (Edit · Remove). Pass options with value and onValueChange and it becomes a segmented control (Day · Week · Month): exactly one stays selected and takes the brand tint at once — no gliding highlight.

pnpm add @zikzuk/ui

import { ButtonGroup } from "@zikzuk/ui";

Segmented control

Showing one week.

Joined actions

When to use

A chart's period.
Two or three equal actions on a row.

Not for

More than three choices — use a select.
Switching between kinds of work — PaneTabs.

Props

Prop	Type	Description
children	ReactNode	Outline Buttons to join.
options	{ value, label, aria-label?, disabled? }[]	Makes it a segmented control.
value / onValueChange	string / (v) => void	Controlled choice.
defaultValue	string	Starting choice; defaults to the first option.
size	"sm" \| "default" Default `"default"`	Segment height.
direction	"row" \| "column" Default `"row"`	Stack vertically.
disabled	boolean	Disable every segment.
aria-label	string	Names the group.
className	string	Extra classes on the outer element.