Components
Button Group
A set of related buttons rendered as one joined unit, with a shared edge and the radius applied only to the outermost corners.
Button Group is a layout and style wrapper. It does not replace Button. It composes multiple Button instances into a joined control.
Preview
Rendered with live Cognition tokens. The seam is shared; only the outer corners round, no dark: classes.
Variants
<ButtonGroup>
<Button variant="outline">…</Button>
</ButtonGroup><ButtonGroup>
<Button>…</Button>
</ButtonGroup><Button>Save</Button>
<Button variant="outline">Cancel</Button><ButtonGroup orientation="vertical">Default outlined, filled primary, and a mixed set all join the same way. Set orientation to stack them.
States
Default. At rest.
Hover. Per button, on pointer over (shown statically).
Active. Press feedback per button (shown statically).
<ButtonGroup disabled><Button variant="outline" disabled>Hover and active respond per button. Disable the whole set with disabled on the group, or one button with its own disabled.
API
Individual buttons accept standard Button props, including variant; group-level size and disabled apply to each unless the button sets its own.
Don't and Do
Don't join unrelated actions into one group. The shared edge tells the reader these buttons belong together, so grouping a save next to an unrelated export reads as a single set when it is not. Keep separate concerns as separate buttons.
<ButtonGroup>
<Button variant="outline"><ChevronLeft /> Previous</Button>
<Button variant="outline">Next <ChevronRight /></Button>
</ButtonGroup>Use it for tightly related actions such as Bold, Italic, Underline, or Previous and Next.
import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";
export function ViewSwitcher() {
return (
<ButtonGroup>
<Button variant="outline">Day</Button>
<Button variant="outline">Week</Button>
<Button variant="outline">Month</Button>
</ButtonGroup>
);
}