Actions
Button Group
A grouped set of related buttons with shared geometry and separators.
⠋
Install
npx shadcn@latest add https://4af.selfsimilar.dev/r/button-group.jsonUsage
import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";
<ButtonGroup>
<Button>Back</Button>
<Button>Next</Button>
</ButtonGroup>API
Main export: ButtonGroup
Joins two or more Buttons into one control, horizontally or vertically. Inner corners are
flattened, each seam gets one hairline, and one outline wraps the group. variant and size
are passed to the buttons as defaults: xs, sm, md, or lg, or icon-xs, icon-sm,
icon, and icon-lg for icon-only buttons.
The group uses role="group"; each button keeps its own tab stop. Use Tabs when
controls switch between content panels. Grouped buttons default to pressTarget="content" so
press feedback leaves the joined edges still.