Button Group
General guidance
Button groups are used to bunch together buttons (or menu items) with similar actions.
In certain instances, button groups can also be used in lieu of an input box—such as when there are only a few options available from which to choose, and/or when all of the options need to be continuously visible to the user.
Sizing and Design
The default choice is the medium button group. Large and small variations are also available. Buttons on the left and right edges of the button groups will have rounded outer corners and square inner corners (where they connect to other buttons). Note that the large variation will have a different corner radius than the medium and small variants.
Button groups should display a minimum of two choices, with a maximum of five. If there are four to five choices, you have the option to use the overflow variation, or consider using an input box instead. For one choice, use a regular button.
Button groups can be displayed with or without a label; the default option is to display the label.
Button States & Button Selection
Button groups will have the same states as regular buttons, with the addition of the active
state: Default
, hover
, on click
, active
, focus
, and disabled
.
Note that a button group can only have one active choice at a given time. However, there can be multiple disabled
states in a button group.
Variations
Default (Text Only)
With Dropdown
The item with the icon must always appear as the last item on the right.
With Overflow
The icon must always appear as the last item on the right.
Text + Icon
The icon must always appear as the last item on the right.
Icon Only
This variation is functionally the same as the default
option, but uses iconography in lieu of text.