Anatomy
- Container: holds all buttons in a unified design
- Buttons: Individual buttons controls within the group, to display all related actions
Usage Guidelines
When to use this component
- To relate and organize buttons that belong to the same functional context or category, helping users understand the relationship between actions.
-
When having multiple related buttons that would otherwise take up significant horizontal real estate, button groups provide a more compact layout.
When not to use this component
- As navigation replacement, even primary or secondary. Actions would be better served by Tabs or other navigation patterns.
-
When there’s only one action in the interface, use the Button component instead.
Best Practices
Use the default button variant and make sure you follow the best practices described in the Button component.
Don't group buttons that don't have a relationship or similar purpose and just because they're close together.
Provide additional semantics and accessibility, apply the suitable role attribute to the button group.
Don't group more than 5 buttons together. Be conscious of the number of options and the space available. If you need to display several actions, use a dropdown instead.
Make a consistent implementation of the button props within the same group to maintain visual hierarchy
Use Icon Button for space efficiency in the interface, keeping in mind Icon Button guidelines
General Component Behaviors
- Each button within the group maintains its individual click handlers and state, functioning as separate interactive elements
- Adjacent buttons share borders or have reduced spacing to visually indicate their relationship while maintaining individual clickable areas.
- Keyboard navigation moves focus between individual buttons within the group using standard tab order
- Individual button states (hover, active, disabled) are maintained independently while respecting the group's overall visual cohesion.
States
Variants
As it acts as an action wrapper, the Button Group can group both simple buttons and icon buttons, provided that they follow their associated guidelines.
Styles
Content Guidelines
- Always write in sentence case. Sentence case is accessible and scannable.
- Keep accessibility and localization in mind – only some icons are universally understood. For example, a magnifying glass for “search,” or the plus symbol for “add”. Most icons are abstract to groups of users, so it’s best to support with copy where possible.
For further information, see the Content Styleguide.
Known Gaps
- Component improvements:
- Swap option for replacing the button by and IconButton
- Accessibility guidelines