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.
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.
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.
Using as a Toggle
Button Groups used as View and Sort controls. Always pre-select the most common option on the left.
Using as a Scoping Control
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
Always pre-select the most common option on the left. A button group label is optional.
A button group can be used as tabs on mobile apps.