Button Group Samples

Even simple button groups can have loads of different styles.

Single SelectionMultiple SelectionRun/Pause Buttons

Compact Group (Connected corners)

A classic button group with adjacent buttons. Rounded ends on first/last items; middle buttons have no rounding for a connected look.

Uses Button with variant="outline" and subtle separators between buttons.

Built with ToggleGroup (type="single"). Use it for tab-like groups.

Selected: overview

Built with ToggleGroup (type="multiple"). Great for text styles or filters.

Selected: ["bold"]

Demonstrates composition of Toggle and Button in a toolbar-like cluster.

Loading…