Combining related actions into a Button Group can save space and reduce the visual clutter of multiple actions on a page. Button Group labels should be short and self-explanatory; for example: export, edit, duplicate. The actions available in a Button Group should be ordered logically, either by usage or importance from left to right.
The individual Buttons within a Button Group follow the anatomy guidelines for Buttons except that only the far right and left Buttons have rounded corners to create the appearance of one button.
- Button: The shape that encloses the label. Follow the Buttons documentation for style variations, sizing and spacing specifications.
- Dividers: The appearance of lines that show division between the individual Buttons.
For detailed documentation on our Button Group anatomy, view the design specs.
Primary and secondary are the two main types of Button Groups available. These types of Button Groups visually indicate to the user that the actions are grouped together. The two types should never be mixed within one Button Group, meaning you cannot have one primary action and 2 secondary actions within one group.
Because there should only be one primary action on a page, a secondary type is highly recommended for Button Groups.
In rare cases, a primary Button Group may be used. Primary Button Groups should appear within more complex pages that may have additional secondary actions outside of the group.
Icons can be added to assist in quickly identifying actions. Ideally, Button Groups should be clearly labeled.
Text labels can be omitted to conserve space, but only icons that clearly represent their actions should be used.
For detailed documentation on adding icons to Button Groups, view the design specs.
Using Button Dropdowns
Button Dropdowns can be used within Button Groups. They can be placed anywhere in a Button Group as long as the buttons are ordered logically, either by usage or importance. For more information, see Button Dropdowns.
For detailed documentation on using Button Dropdowns in Button Groups, view the design specs.
The focused state for Button Groups uses an internal borderline. All of the other states follow regular Button guidelines.
Normal state is how the Button Group looks by default before any interaction or action is taken.
Hover state occurs when the user hovers over a button or button dropdown with their cursor.
Focus state appears when the button or button dropdown is currently selected and awaiting action. This commonly occurs when using a keyboard to navigate.
Pressed state occurs very briefly when the button is being activated by the user when pressing down on the mouse button.
Disable state occurs when an action currently isn't available within a Button Group.
Disabled Button Groups should only be used when an action can be taken within the current UI to enable them. If no action can be taken to enable the Button Group, then the Button Group should be hidden instead of disabled.
We have added the CSS property
pointer-events: none; to this Button Group style that will further prevent users from clicking a disabled Button Group.
Reverse the order of the actions or disregard importance of actions when determining their order within the group.
Avoid combining primary and secondary buttons in the same Button Group.
Use action labels that are 1-3 short words.
Use action labels that are long or more than 3 words.
- Use individual Buttons when the buttons are not closely related, have varying levels of priority, or are fewer.
- Use Radio Buttons when labels require more text, or you need a segmented control that emphasizes a selection being made.
- Use Tabs when you need tertiary navigation on a page.
- Use Toggles when a feature needs to be enabled or disabled.