A button group collects similar or related actions.
Status:
In use
About this element
The default button group arranges each button as a separate element with a gap between them. On mobile devices, the buttons are arranged vertically.
Examples and code
Examples and code
[ show examples of grouped buttons both horizontally and in a mobile view (stacked) ]
Guidance
When to use
- Actions have a contextual relationship. For example, the default button group can be used when a form has both a primary and alternative action.
- Stepping through linear content. Buttons in a button group can be used for directional navigation and actions (e.g., “Back,” “Next,” “Continue,” “Skip,” “Cancel.”).
When to consider something else
- If actions are not related. Consider how placement and alternative structure of unrelated actions can improve usability over placing all actions in a group.
- When mixing destructive and non-destructive actions. This can lead to input mistakes.
- Linking to content. Buttons in button groups should not be used when text links would be simpler and more contextually appropriate. Grouped buttons such as “Next” and “Previous” are acceptable when content is organized sequentially.
Usability guidance
- Avoid burden of choice. Try not to present the user with too many options.
- Buttons inside of a button group follow the same guidelines as the button component.
Accessibility guidance
[AMBER DID NOT EDIT THIS BELOW, NEEDS DESIGN INPUT]
Convey relationship. If not using a list element, give the parent element role="group" in order to convey to screen readers that actions are part of a group. If using as part of a toolbar, use role="toolbar".
Button groups support any style and size.
Because the button group uses flexbox, there are several ways to modify how the default button group is displayed.
- The default button group will display as a column on smaller screen sizes. To override this behavior and display buttons in a row for all screen sizes, use the flex-row utility.
- On smaller screens, the first button in the source order will appear at the top of column. You can change this behavior using the order utility. The order utility includes responsive advanced settings that allow it to target specific screen sizes.
- Instead of each button appearing on the left-hand side on larger screens (or if you used flex-row), you can use flex-justify to justify the buttons