Home/Components/Button group

Button group

Joined buttons for related actions. The split-button (primary + caret) and the radio-style toggle group both live here.

Stable .btn-group Joined affordance

Split button

Primary action on the left, secondary actions in a dropdown to the right.

Split buttons.btn-group.split

Toggle group

Radio-style — exactly one button is "on" at a time. Used for view switchers, severity filters.

Toggle groups.toggle-group

Do & don't

Do

Use a split button when 80 % of the time the user wants the primary action and 20 % needs an alternative.

Don't

Use a button group for unrelated actions. Joined visuals imply joined intent.

Do

Pick one canonical style per surface. Don’t mix segmented and outline-joined on the same screen.

Don't

Make every button in the group equal weight. The leftmost is the primary.