Button Group

A segmented cluster of real Buttons that share edges — the wrapper rewrites only the shared radii and borders.

tsx

1import {
2  Button, ButtonGroup, ButtonGroupSeparator,
3  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
4  DropdownMenuItem, DropdownMenuSeparator,
5} from "@pestoui/core"

Horizontal

The group reads as one pill: the first child keeps its leading radius, the last keeps its trailing one, and the seams between them collapse to a single hairline. The split button's chevron is a DropdownMenuTrigger with asChild, so the trigger's props land on the Button already there — no button nested in a button, and the segment stays the last DOM child the edge rules select on.

Vertical

A stack reads as a full-width control, so the ends clamp to rounded-lg instead of the pill radius.

Icon segments

Icon buttons are square, so they keep their own pixel radius rather than the group's clamp.

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Lay the segments out in a row or a stack. Also sets the ButtonGroupSeparator axis via context.
children	React.ReactNode	—	Untouched <Button>s (and optional ButtonGroupSeparator). Every Button variant, size and state keeps working. A wrapper that renders no DOM of its own — DropdownMenu, Tooltip, a Fragment — is legal too, and is how the split button above is built: the edge rules select element children, so with asChild on the trigger the Button underneath is still what :first-child, :last-child and :not(:first-child) land on. A wrapper that does emit an element becomes the child instead, and the radius and border rewrites hit the wrapper rather than the Button.
className	string	—	Merged onto the group wrapper — use it for width, e.g. w-full.

PreviousButton Next Calendar

Pesto UI · 117 documented components