The default button group arranges each button as a separate element with a gap between them. On mobile devices, the buttons are arranged vertically.
When to use the default button groups
- 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.
- Avoid burden of choice. Try not to present the user with too many options.
- Because the button group uses
flexbox, there are several ways 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
Button group settings
This component has no settings.
Button group variants
|usa-button-group--segmented||Display a group of buttons in a row as a single element.|