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 group
- 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.
- 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
Using the default button group
- Buttons inside of a button group follow the same guidelines as the button component.
- Button groups support any style and size.
- 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