Overview
A button group is used to organize related actions and allow selection and toggling. Buttons can be grouped in a single line or in a vertical column. They can be used within action bars (e.g. Toolbar).
Usage
Use when
- Organizing similar functionality of 2-5 actions.
- You need to show the selected action or states with contextual relationships.
- Grouping related actions or states.
- Stepping through linear content (e.g. Wizards).
Don’t use when
- Actions represented by buttons are not related.
- Mixing destructive and non-destructive actions.
- Button labels do not appropriately describe the actions within one or two words. Instead use Links.
- You need to navigate through content on the page. Instead, use Tabs.
- You have more than 5 options so as not to overwhelm the user with too many choices.
Types
Button groups support two layout directions: horizontal and vertical