Version 5.0.0

Button group

A button group is a grouping of buttons whose actions are related to each other.

Text field with label Email address, value email@adobe.com, and two buttons underneath aligned to the right of the text field. A call-to-action (blue) button with label Submit on the right, and a secondary button with label Cancel on the left.Text field with label Email address, value email@adobe.com, and two buttons underneath aligned to the right of the text field. A call-to-action (blue) button with label Submit on the right, and a secondary button with label Cancel on the left.

Options#


Example of horizontal button group: call-to-action button on the right, label Submit, secondary button on the left, label Cancel. Example of vertical button group: call-to-action button on the bottom, label Submit, secondary button on top, label Cancel.

Orientation#

A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. The vertical option should be reserved for when horizontal space is limited.

Example of disabled button group, call-to-action button, label Enable, quiet secondary button, label Cancel. Both are disabled.

Disabled#

A button group in a disabled state shows all the buttons contained in the group as unable to be interacted with.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault Value
orientation
horizontal / vertical
horizontal
is disabled
yes / no
no

Behaviors#


Key example of an alert dialog titled Rate this app and body text If you enjoy our app, would you mind taking a moment to rate it? Three buttons in a button group stacked vertically when there's not enough horizontal space, with the main action at the bottom. Labels bottom to top: Rate now, Remind me later, No, thanks.

Overflow#

When horizontal space is limited, button groups stack vertically. Buttons are stacked by the importance of the action, with the most critical or primary action at the bottom.

Usage guidelines#


Use 2 button styles maximum#

The top-level action within a button group should be a call to action, primary, or negative button. The other buttons should always be secondary buttons of the same style (standard or quiet). Don’t combine more than 2 button styles in a button group.

Key example showing correct usage of button styles within a button group. From right to left: call-to-action button, label Continue; secondary button, label Edit; secondary button, label Cancel.
Key example showing incorrect usage of button styles within a button group. Total of 3 styles combined. From right to left: call-to-action button, label Continue; primary button, label Edit; quiet secondary button, label Cancel.

Align button groups based on content#

Button groups are aligned contextually. In general, button groups are left-aligned to follow content such as a block of text. They are center-aligned in the context of an empty state. And, they should be right-aligned inside container components such as dialogs, popovers, or cards.

Key examples showing correct button group alignment. Left-aligned button group following page content. Right-aligned button group inside a container.

Respect button order within a group#

The order of button priority should match the alignment of surrounding text. When text is left-aligned, buttons should be arranged so that the leftmost button is the most critical. When text is right- or center- aligned, the most critical action should be the furthest right.

Key examples showing correct button order within a button group. Left-aligned button group to follow left-aligned content with main action on the left-most as call-to-action button, label Submit, secondary button, label Cancel. Center-aligned button group to follow center-aligned content with main action on the right-most as call-to-action button, label Upload, secondary button on the left, label Search library. Right-aligned button group within a container with main action on the right-most as call-to-action button, label Confirm, secondary button on the left, label Cancel.
Key example showing incorrect button order within a button group. Left-aligned button group to follow left-aligned content, with main action on the right-most as call-to-action button, label Submit, secondary button, label Cancel.

Use icons only for top-level actions#

Not all buttons in a group require an icon, but buttons with icons should always be of a higher priority than ones without icons. If the top-level action in a group doesn’t have an icon, don’t use icons in the remaining lower-level actions.

Key example showing correct usage of icons within a button group. Main action as call-to-action button with icon, label Share. Primary button without an icon, label Edit.
Key example showing incorrect usage of icons within a button group. Main action as call-to-action button without icon, label Confirm. Primary button with icon, label Share. Primary button without icon, label Edit.

Internationalization#


RTL#

For RTL (right-to-left) languages, the layout of the button group is mirrored.

Keyboard interactions#


KeyInteraction
TabMoves focus to the next button in the group.

Changelog#


DateNumberNotes
Jan 30, 20205.0.0
  • This component has been added to the website

Design checklist#


All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.