Button Groups

Button Groups

Button groups visually combine related controls such as formatting choices, filters, or segmented actions.

Core concept

Explain btn-group, btn-toolbar, vertical groups, grouping labels, and how multiple buttons share borders and radius treatment.

Using it in a real interface

Create a text-alignment group and a toolbar containing several groups. Explain when grouping communicates a relationship and when separate buttons with spacing are clearer.

Implementation notes

A group should contain genuinely related actions. Do not put unrelated navigation, destructive actions, and settings into one visual group just because the component makes them fit.