Button Group

A button group is a type of form input that presents selectable options as buttons. Use as an alternative to radio or select components with no more than four options. Each option shares the same container and text label structure as a standard button.

Variants

Every button group displays both active and inactive options, indicated primarily by the fill color of the container. All options are inactive to start, and the user can only select one active option at a time. Active and inactive options each have three states: default, hover, and focus.

Design Environment

Use this component in forms when there are at least two and no more than four options to choose from. Individual buttons within the group will be divided evenly across the full width of the component. Keep button groups at a distance of 32px from the previous component.

NOTE: If it’s not possible to meet all of these guidelines, use the radio component instead.

Microcopy

Keep text labels on a single line and of similar length by removing unnecessary words. All options should use the same part of speech (e.g. all nouns or all verbs) rather than mixing. Use sentence case with no end punctuation.

NOTE: If limiting wording this way sounds awkward, use the radio component instead.