Adobe Logo

Spectrum

Version 5.1.0

Button

Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

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.

Table of contents#

Anatomy#

Diagram illustrating through labels the component parts of a button including the label.

Options#

Key example of a call-to-action button, label Action. Uses solid static-blue-600 background and bold static-white label.

Call to action#

The call to action button communicates strong emphasis and is reserved for encouraging critical actions. There should only be one visible call to action button per section. There is no quiet style for this button because it is meant to be intentionally prominent.

Key example of two primary buttons, labels Action. One with a 2px border in gray-800, the other in quiet style without a visible border.

Primary#

The primary button is used for medium emphasis. It should be used in place of a call to action button when the action requires less prominence, or if there are multiple primary actions of the same importance on the page. It can be displayed either in standard style (visible stroke) or in quiet style.

Key example of two secondary buttons, labels Action. One with a 2px border in gray-700, the other in quiet style without a visible border.

Secondary#

The secondary button is for low emphasis. It is meant to be paired with other button types to surface less prominent actions, and should never be the sole button in a group. It can be displayed either in standard style (visible stroke) or in quiet style.

Key example of two negative buttons, label Action. One with a 2px border in red-600, the other in quiet style without a visible border.

Negative#

The negative button is for emphasizing actions that can be destructive or negative if taken. It should be used sparingly. It can be displayed either in standard style (visible stroke) or in quiet style.

Key example of two over-background buttons on top of a teal colored background, label Action. One with a 2px border in static-white, the other in quiet style without a visible border.

Over background#

When a button needs to be placed on top of a colored background or a visual, use the over background button. This button appears in white regardless of background or color theme. Make sure the background offers enough contrast for the button to be legible.

Key example of three buttons with icons, labeled Share. A call-to-action button, a primary button, and a quiet primary button.

Icons#

Icons can be used in buttons when additional clarity is required. Icons should not be used for decoration.

Behaviors#

Key example of 3 call-to-action buttons with different widths based on labels Agree, Get started, Start experience.

Flexible width#

The width of a button automatically adjusts to fit the text. The padding on each side of the button is equal to half its height.

Key example of call-to-action button's minimum width of size-900, label OK. Quiet primary button without minimum width, label OK.

Minimum width#

Standard buttons have a minimum width of 2.25× the height of the button. This guarantees that small buttons retain an identifiable shape. Quiet buttons do not have a minimum width; their width depends exclusively on the length of the text.

Key examples of text wrapping for buttons. Call-to-action button and primary button, label Information about Creative Cloud in German in two lines of center-aligned text.

Text overflow#

When the button text is too long for the horizontal space available, it wraps to form another line.

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.

Button group overflow#

When horizontal space is limited, button groups stack vertically. They should appear in ascending order based on importance, with the most critical 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 subsequent 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. Generally, button groups should be left-aligned to follow content. However, they should be right-aligned inside container components, such as in dialogs, popovers, or cards. They should be center-aligned in the context of an empty state.

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#

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.

Be concise#

Button text should be concise: 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces. Don’t use punctuation marks such as periods or exclamation points.

Key example showing correct usage of concise button label. Call-to-action button, label Start experience.
Key example showing incorrect usage of concise button label. Call-to-action button, label Start the experience right now!

Use clear text#

Button texts should be clear about the outcome of the action. Most buttons should start with a verb. For example, use “Agree” instead of “Yes” in a dialog or use “Sign Up” instead of “Submit” in a form.

Key example showing correct usage of clear button label. Call-to-action button, label Agree.
Key example showing ambiguous button label. Call-to-action button, label Yes.

Use sentence case#

Button text should always be in sentence case. Capitalization should never be used to give more prominence to a specific button.

Key example showing correct usage of sentence case in button label. Call-to-action button, label Get started.
Key examples showing incorrect usage of sentence case in button label. Call-to-action buttons, label get started in all-caps, all lowercase, and title case.

Don't override color#

Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.

Key example showing incorrect button background color in yellow.

Use icons only when necessary#

Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Icons should not be used for decoration.

Key example showing correct usage of icon in button. Call-to-action button with icon, label Share.
Key example showing incorrect usage of icon in button, where icons don't add clarity. Primary button with icon, label Cancel. Call-to-action button with icon, label More. Call-to-action button with icon, label Submit.

Use icons for top-level action(s) only#

Not all buttons in a group require an icon, but buttons with icons should always be of a higher priority than ones without. 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.

Display a popover when featuring subsequent options#

In some instances, it is possible to have a call to action button display a popover (or tray) to feature subsequent options for the action. These options should extend a single action, and should not contain arbitrary menu items.

Key example showing correct usage of popover menu featuring subsequent options. Call-to-action button, label New. Popover menu with 3 menu options labeled Document, Collection, Project.
Key example showing incorrect usage of popover menu featuring subsequent options. Call-to-action button, label More. Popover menu with 3 menu options that are not related to each other labeled Settings, Help and FAQ, Terms and conditions.

Keyboard interactions#

KeyInteraction
Space or EnterExecutes the button action. The focus remains on the button except if the button opens or closes the current container. In this case, the focus moves to the target or back to the caller.

Changelog#

DateNumberNotes
Aug 22, 20195.1.0
  • Added text overflow behavior
Jul 31, 20195.0.2
  • Updated text to use sentence case
Jun 12, 20195.0.1
  • Changed the text size to font size 100 (15 px to 14 px on desktop, 18 px to 17 px on mobile) and adjusted the baseline alignment. This is also reflected in components using buttons: coach mark, dialog, and toast.
Apr 19, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)
  • Added button group overflow behavior

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.

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