Button group

Multiple buttons with related actions stacked in a horizontal row

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: February 21, 2024

Overview

A button group is used to show a group of equally weighted yet related actions. Within the group, all buttons are equal in width and can contain text and/or Icons.

Great for:

  • Undo/Redo
  • Deactivate/Archive/Delete

Design

The button group component is a collection of related action buttons that are grouped together. They include all of the underlying properties, interactive states, and visual styles of the button components used within them.

Variants

  • Secondary (default): button groups are generally reserved for secondary or tertiary actions, so the default visual style is the same as the secondary button.
  • Secondary (overflow): this is a great alternative when there are multiple secondary or tertiary actions that aren’t as commonly used and can be placed in the overflow menu
  • Primary (overflow): the primary variation of this component should only be used in the overflow style. This is great for places where the primary action may have different paths—for instance: ‘Save’ as the visible button and ‘Save and exit’ and additional save functions placed in the overflow.
🟢 Button Group / Size=Large, Type=Secondary

🟢 Button Group / Size=Large, Type=Secondary

🟢 Button Group / Size=Large, Type=Secondary (Overflow)

🟢 Button Group / Size=Large, Type=Secondary (Overflow)

🟢 Button Group / Size=Large, Type=Primary

🟢 Button Group / Size=Large, Type=Primary

 

Sizes

Button groups have 3 sizes that correspond with the button and input sizes available. The size of the button group that is used should be determined by the elements it’s placed next to.

For example, if using a medium button or input, the medium button group should be used.

🟢 Button Group / Size=Large, Type=Secondary

🟢 Button Group / Size=Large, Type=Secondary

🟢 Button Group / Size=Medium, Type=Secondary

🟢 Button Group / Size=Medium, Type=Secondary

🟢 Button Group / Size=Small, Type=Secondary

🟢 Button Group / Size=Small, Type=Secondary

 

 

Guidelines

Use cases

  • Limit the number of buttons in the group. If inclined to have more than 4 actions in the group, consider the hierarchy of importance in the actions or try overflow Menus.
  • Buttons should be consistent with type of content they contain. Buttons can be text-only, icon-only, or text-with-icon, but all buttons in the group must match.
  • Buttons within group map to specific actions. Buttons that toggle open Menus should not be placed within a group in this manner.
  • Use button groups with primary styling sparingly. Button groups using the primary button style should be limited to a primary action and an overflow menu.

 

  • Use concise and clear language for button label
  • Ensure the button's action is easily understood by users
  • Use icons to enhance comprehension, not replace text
  • Do not use to indicate "select-able" options. If the aim is to indicate a selected option out of a small set of choices, consider using Selected controls.
  • Use technical jargon or ambiguous terms in labels
  • Place buttons too close to each other, risking accidental clicks

 

Content

  • Labeling: Button labels should be written in Sentence case, with only the first letter of the first word capitalized unless using proper nouns or acronyms.
  • Length: Keep button text short to maintain clarity and usability. Ideally, use no more than three words.

Accessibility

  • Keyboard Navigation: Ensure all buttons are accessible through keyboard navigation using the Tab and Shift + Tab keys to navigate forward and backward.
  • Focus Indicators: Provide clear focus indicators for keyboard navigation, such as a border highlight.
  • Aria Labels: Use aria-label for buttons with icons but no text, ensuring screen readers can accurately convey the button's purpose.
  • Contrast: Maintain high contrast between button text/icons and their backgrounds to comply with WCAG 2.1 guidelines for text and non-text contrast.
  • Adaptive: Buttons should be easily clickable across devices, with a minimum target area to accommodate various input methods, including touch, stylus, and mouse.

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

Status

The component has a health status indicated

Healthy