Button groups

Usage

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.

Anatomy

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.

1. Button: The shape that encloses the label. Follow the Buttons documentation for style variations, sizing and spacing specifications.
2. Dividers: The appearance of lines that show division between the individual Buttons.

For detailed documentation on our Button Group anatomy, view the design specs.

Types

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.

Secondary

Because there should only be one primary action on a page, a secondary type is highly recommended for Button Groups.

Primary

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.

Adding icons

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.

States

The focused state for Button Groups uses an internal borderline. All of the other states follow regular Button guidelines.

Normal

Normal state is how the Button Group looks by default before any interaction or action is taken.

Hover

Hover state occurs when the user hovers over a button or button dropdown with their cursor.

Focus

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

Pressed state occurs very briefly when the button is being activated by the user when pressing down on the mouse button.

Disabled state

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.

Best practices

Button Groups should follow the best practices outlined in the Button component and guidelines for the Button Dropdown component when included.

Button order

Button styling

Button labeling

Alternate considerations

• 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.