Button group

Version 6.0.1

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 accent (blue) fill button with label Submit on the right, and a secondary outline 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 accent (blue) fill button with label Submit on the right, and a secondary outline button with label Cancel on the left.
DateVersionSpectrumExpress UI KitSep 12, 20226.0.1DownloadDownloadApr 06, 20226.0.0DownloadDownloadFeb 07, 20225.1.0DownloadDownloadJan 31, 20205.0.0Download

Options#

Example of horizontal button group: accent fill button on the right, label Submit, secondary outline button on the left, label Cancel. Example of vertical button group: accent fill button on the bottom, label Submit, secondary outline 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. Use vertical option when horizontal space is limited.

Key example of four button groups with label only buttons showing the size options available including small, medium, large, and extra-large. All sizes show a button group with 2 buttons. Secondary button, label Cancel. Accent button, label Submit.

Size#

Button groups come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

Example of disabled button group, accent button, label Enable, secondary outline button, label Cancel. Both are disabled.

Disabled#

A button group in a disabled state shows that the buttons within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that a button group may become available later.

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 Valueorientationhorizontal / verticalhorizontalsizesmall / medium / large / extra-largemediumis disabledyes / nono

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 the recommended option for subsequent actions#

The most critical action within a button group should be an accent, primary, or negative button (fill or outline). The other actions should always be a secondary outline button.

do
Key example showing correct usage of button styles within a button group. From right to left: accent fill button, label Continue; secondary outline button, label Edit; secondary outline button, label Cancel.
dont
Key examples showing incorrect usage of button styles within a button group. First example, 2 different styles combined from right to left: accent fill button, label Continue; accent outline button, label Edit; accent outline button, label Cancel. Second example, 2 different styles combined from right to left: primary fill button, label Continue; primary outline button, label Edit; primary outline button, label Cancel. Third example, 3 different styles combined from right to left: primary fill button, label Continue; primary outline button, label Edit; negative outline button, label Cancel. Fourth example, 2 different styles combined from right to left: secondary fill button, label Continue; secondary outline button, label Edit; secondary outline 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.

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

do
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 accent fill button, label Submit, secondary outline button, label Cancel. Center-aligned button group to follow center-aligned content with main action on the right-most as accent fill button, label Upload, secondary outline button on the left, label Search library. Right-aligned button group within a container with main action on the right-most as accent fill button, label Confirm, secondary outline button on the left, label Cancel.
dont
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 accent fill button, label Submit, secondary outline button, label Cancel.

Use icons only for the most critical 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 most critical action in a group doesn’t have an icon, don’t use icons in the remaining lower-level actions.

do
Key example showing correct usage of icons within a button group. Main action as accent fill button with icon, label Share. Secondary outline button without an icon, label Edit.
dont
Key example showing incorrect usage of icons within a button group. Main action as accent fill button without icon, label Confirm. Secondary outline button with icon, label Share. Secondary outline button without icon, label Edit.

Use a button group to show additional actions#

Instead of a single split button (now a deprecated component), use a button group to show any additional actions related to the most critical action.

do
Key example of the correct way to use a button group to show additional actions. A button group contains an accent button, label Open, and an icon-only More actions button.
dont
Key example of an incorrect way to show additional actions. Two split buttons, both labeled Open, one with an icon-only expand affordance and the other with a More actions affordance.

Internationalization#

Key example of a mirrored accent fill button with icon on the right and label Share in Arabic on the left. Key example of mirrored horizontal button group: accent fill button on the left, label Share in Arabic, secondary outline button on the right, label Cancel in Arabic.

RTL#

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

Keyboard interactions#

KeyInteractionTabMoves focus to the next button in the group.Shift + TabMoves focus to the previous button in the group.

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Key example of horizontal button group in Spectrum for Adobe Express theme: accent fill button on the right, label Submit, secondary outline button on the left, label Cancel.

Spectrum for Adobe Express#

Button groups stay the same across themes.

Changelog#

DateNumberNotesSep 12, 20226.0.1
  • Updated disabled text color (from gray-500 to gray-400) and disabled border color (from gray-200 to gray-300)
Apr 06, 20226.0.0
  • Updated all colors to 6.0.0
Feb 07, 20225.1.0
  • Added size option
Jan 31, 20205.0.0
  • This component has been added to the website

Design checklist#

check

All interactive states

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

check

All color themes

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

unchecked

All platform scales

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

N/A

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

N/A

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

N/A

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

check

Content design

UI language and information design considerations have been incorporated into component design.

check

Defined options

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

check

Defined behaviors

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

check

Usage guidelines

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

N/A

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

check

Internationalization guidelines

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

check

Keyboard interactions

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

check

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

N/A

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

check

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

unchecked

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.