Button Groups

Definition

Button Groups allow a user to select one item from a small set of options. They can be used as toggles, as scoping controls, and as a substitute for radio buttons, or tabs.

Full-screen width button groups are optionally allowed on the XS grid (0-479). In most cases, button groups should only be as wide as the labels plus minimum left/right padding demand.

Common Characteristics

All button groups have bold, ALL-CAPS labels.

The button on the left is always pre-selected by default.

Buttons in a group have these states: active, focused, hover/tap, and selected.

Size

Button Groups are normally 40px high, but a small 32px alternative may be used. Whichever size is used, use the same size for any associated elements like text inputs.

Labels should be as short as possible and each button in a group should be the same width. If this can’t be achieved because of varied label lengths, consider using a different control.

Scenarios

Using as a Toggle

button group toggle

Button Groups used as View and Sort controls. Always pre-select the most common option on the left.

Using as a Scoping Control

button group scoping

A button group used to scope another control Always pre-select the most common option on the left. A button group label is optional.

Using as Radio Buttons

button group radio

Always pre-select the most common option on the left. A button group label is optional.

Replacing Tabs

button group tabs

A button group can be used as tabs on mobile apps.