Adobe Logo

Spectrum

Version 6.0.1

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

Table of contents#

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 value
orientation
horizontal / vertical
horizontal
size
small / medium / large / extra-large
medium
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 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.

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

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

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

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

KeyInteraction
TabMoves 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#

DateNumberNotes
Sep 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#

All interactive states

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

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

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

Content design

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

Defined options

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

Defined behaviors

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

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.

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.

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.

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.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.