Button

Version 7.0.1

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.

Accent button, label Get started. Button is pill-shaped with solid blue background and white bolded text.Accent button, label Get started. Button is pill-shaped with solid blue background and white bolded text.
DateVersionSpectrumExpress UI KitSep 12, 20227.0.1DownloadDownloadApr 06, 20227.0.0DownloadDownloadNov 01, 20216.0.0DownloadDownloadSep 29, 20205.3.0DownloadApr 29, 20205.2.0DownloadApr 13, 20205.1.1DownloadAug 22, 20195.1.0DownloadJul 31, 20195.0.2DownloadJun 13, 20195.0.1DownloadApr 20, 20195.0.0Download

Anatomy#

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

Options#

Key example of a button with a share icon and label Share, one with label Share and no icon, and one with a share icon without a label.

Label and icon#

Buttons should always have a label, unless they are only using an icon that is universally understood and accessible. They can have an optional icon, but it should not be used for decoration. Use an icon only when necessary and when it has a strong association with the label text.

The label can be hidden to create an icon-only button. If the label is hidden, an icon is required, and the label will appear in a tooltip.

Key example of accent button in fill style, label Action, has a solid blue-500 background and bold static-white label. Accent button in outline style, label Action, has 2px border in blue-500 and bold blue-500 label.

Accent variant#

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don’t use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Key example of primary button in fill style, label Action, has a solid gray-800 background and bold static-white label. Primary button in outline style, label Action, has 2px border in gray-800 and bold gray-800 label.

Primary variant#

The primary button is for medium emphasis. Use it 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 in the same view.

Key example of secondary button in fill style, label Action, has a solid gray-300 background and bold gray-800 label. Secondary button in outline style, label Action, has 2px border in gray-300 and bold gray-800 label.

Secondary variant#

The secondary button is for low emphasis. It’s paired with other button types to surface less prominent actions, and should never be the only button in a group.

Key example of negative button in fill style, label Action, has a solid red-600 background and bold static-white label. Negative button in outline style, label Action, has 2px border in red-600 and bold gray-600 label.

Negative variant#

The negative button is for emphasizing actions that can be destructive or have negative consequences if taken. Use it sparingly.

Key example of static color white and black buttons, labeled Action. Showing all variants, accent, primary, secondary, and negative.

Static color#

When a button needs to be placed on top of a color background or a visual, use the static color option. Static color buttons are available in outline or fill styles, in black or white, and don't change shades or values depending upon the color theme.

Use static black on light color or image backgrounds, and static white on dark color or image backgrounds, regardless of the color theme.

Static color buttons can appear in static white or black, regardless of color theme. The static color option allows for these to be placed on top of a custom background that is not part of a Spectrum color theme while still providing optimal contrast.

Key example of primary, secondary, negative, and over background buttons, labeled Action, in both fill and outline styles.

Style#

Buttons are available in either fill or outline styles. A button in the fill style has a solid background, since it’s meant to be intentionally more prominent than a button in the outline style.

An outline style button has a visible stroke and no background color, and should only be used for secondary actions.

Key example of four buttons with icon and label Share showing the size options available including small, medium, large, and extra-large.

Size#

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

Key example of 2 justified accent buttons. One without an icon and labeled Render, and one with an icon for sharing labeled Share.

Justified#

A button can become justified. By default, it is not justified since the button size depends on the label and/or icon inside of each button. When a button is justified, it takes up the entire available container width.

Key examples of buttons in the pending state, one in a fill style with a solid gray-200 background and one in an outline style with a 2px gray-300 border. Both show a progress circle with an indeterminate loading state.

Pending#

Buttons can indicate that a quick progress action is taking place (e.g., saving settings on a server). In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress.

Use the pending state for a button sparingly. It should be reserved only for when the progress is supposed to be quick (taking 5 seconds or less), and when there is no better way to communicate as such.

Key example of 2 disabled buttons, one in a fill style with a solid gray-200 background and one in an outline style with a 2px gray-300 border, labeled Action.

Disabled#

A button in a disabled state shows that an action exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action 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 Valuelabeltext–hide labeltext–iconicon / nothing
Icon must be present if the label is not defined.
nothingvariantaccent / primary / secondary / negativeaccentstatic colornone / white / blacknonestylefill / outlinefillsizesmall / medium/ large / extra-largemediumjustifiedyes / nonois pendingyes / nonois disabledyes / nono

Behaviors#

Button with placeholder label, accent variant, in focus.

Keyboard focus#

A button can be navigated using a keyboard. The keyboard focus state takes the button’s visual hover state and adds a blue ring to the button in focus.

Key examples showing a button without a visible label. Icon for Share, mouse hovered over button showing tooltip label Share.

Tooltip when the label is hidden#

When the button label is hidden, a tooltip is shown on hover that displays the label text and, if appropriate, a keyboard shortcut.

Key example of 3 accent buttons with different widths based on labels Agree, Get started, Start experience.

Flexible width#

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

Key example of accent button's minimum width of size-900, label OK.

Minimum width#

Buttons have a minimum width of 2.25× the height of the button. This ensures that small buttons retain an identifiable shape.

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 examples of the cursor direction behavior for buttons. First example, accent button, label Visit website. Pointer cursor appears. Second example, accent button, label Save. Arrow cursor appears.

Cursor direction#

Buttons use the default arrow cursor for all states, including hover and down. The only exception occurs on the web; if the button is using the href property it will display the pointer cursor instead.

Key example showing the correct amount of time that should be waited before showing the pending state. Two buttons above a magenta line that represents time passing. The first button, a filled accent button with label “Save” is shown above the line’s beginning, represented by a dot with label “0 seconds”. To the right of the first button is a pending button placed above another dot with label “1 second” representing correctly that after 1 second the accent button has entered a pending state.

Delay before pending state#

Some progress can be very quick. In order to avoid showing a progress circle for a fraction of a second, which results in an unpleasant flickering, there is a delay of 1 second before the pending state appears. During this delay, the button continues to visually respond to interactive events (e.g., hover), but additional clicks do not result in repeated submissions.

Key example of button in Windows “high contrast black” theme with label “action” and disabled button with label “disabled”.

Windows high contrast mode#

In Windows high contrast mode, buttons should be displayed using the high contrast theme-specified colors for buttons. By default, borders should be same as the button text color. In hover and keyboard focus states, a border should display as the button border color. In the disabled state, border and text color should display as the disabled color.

Button (Windows high contrast mode) UI kit

Usage guidelines#

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.

do
Key example showing correct usage of icon in button. Call-to-action button with icon, label Share.
dont
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.

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.

dont
Key example showing incorrect button background color in yellow, label Continue.

When to use static black and static white#

To ensure maximum contrast with the background, use static black for light backgrounds and images, and use static white for dark backgrounds and images. Avoid placing static components on top of busy images with a lot of variance in contrast.

do
Four key examples of two buttons shown in fill and outline styles, correctly using the static black and white options, all labeled Action. First example, static black accent buttons on a solid light blue background. Second example, static black secondary buttons on a light yellow gradient background. Third example, static white accent buttons on solid dark blue background. Forth example, static white secondary buttons on dark gradient background.
dont
Four key examples of two buttons shown in fill and outline styles, incorrectly using the static black and white options, all labeled Action. First example, static black accent buttons on a solid dark blue background. Second example, static black secondary buttons on a dark gradient background. Third example, static white accent buttons on solid light blue background. Forth example, static white secondary buttons on light gradient background. All show insufficient contrast between the buttons and the background.

Don't use the pending state for long progress#

The pending state should be reserved for indeterminate actions that are expected to take 5 seconds or less. For determinate or longer actions, use a progress bar or progress circle outside of the button.

do
Key example showing the correct usage of a progress bar instead of a button in pending state for a determinate and lengthy action. Progress bar, label Uploading photos at 80%.
dont
Key example showing the incorrect usage of a button in a pending state used for a determinate and lengthy action. Dialog title, Upload 10 photos Dialog description, Are you sure that you want to upload the 10 photos selected to your page? Primary action, button in pending state.

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.

Display a popover when featuring subsequent options#

In some instances, it's possible to have a call to action button display a popover (or tray) to feature subsequent options. These options should extend and parallel the action of the button. Do not include arbitrary or unrelated options.

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

Content standards#

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.

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

Write labels as verbs#

A button represents an action, so its label needs to reflect the action that a user is taking — which is a verb. Labels written as nouns or adjectives tend to be unclear and disorienting.

do
3 key examples of how to correctly write a button label as verb. First example, accent button in fill style, label Close. Second example, accent button in outline style, label Connect to wifi. Third example, accent button in outline style, label Agree.
dont
3 key examples of how to not write a button label. First example, accent button in fill style, label Done. Second example, accent button in outline style, label Wifi. Third example, accent button in outline style, label Yes.

Clearly state the action#

Make sure that a button’s label clearly states the outcome of the action. Use the same word or phrase as found elsewhere in the experience.

For example, when designing a form for people to sign up for a trial offer, use “Sign up” as the call to action for completing the form. Phrases like “Start trial” skip the sign up step. Words like “Submit” or “Enter,” while technically correct, focus on the action of finishing filling out the form itself, rather than what the user is actually doing by filling it out (signing up for something).

do
2 key examples of how to correctly write a button label that clearly states the action. First example, accent button in fill style, label Sign up. Second example, accent button in outline style, label Give feedback.
dont
2 key examples of how to not write a button label. First example, accent button in fill style, label Enter. Second example, accent button in outline style, What do you think? Question mark at the end.

Use sentence case#

Button text should always be in sentence case. Never use capitalization to emphasize a specific button.

do
Key example of how to correctly write a button label in sentence case. Accent button in fill style, label Get started. Capital “G” in “get,” lowercase “s” in “started.”
dont
3 key examples of incorrect casing in writing button labels. First example, accent button in fill style, label GET STARTED. Written in all caps. Second example, accent button in outline style, label get started. Written in all lowercase. Third example, accent button in outline style, label Get Started. Written in title case, with capital “G” in “get” and capital “S” in “started.

Be aware of tone#

Emoji and exclamation points aren’t appropriate for the functional, utilitarian nature of buttons. Keep the label to just text, with no punctuation or extra decoration.

do
Key example of how to correctly write a button label in the appropriate tone. Accent button in fill style, label Try it.
dont
Key example of how to incorrectly write a button label in the appropriate tone. Accent button in fill style, label Try it out with an emoji face wearing sunglasses.

Internationalization#

Key example of a mirrored call to action button with icon on the right and label Share in Arabic on the left.

RTL#

For RTL (right-to-left) languages, the layout of the button is mirrored. The icon is placed on the right side of the text.

Keyboard interactions#

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

Theming#

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

Key example of accent and primary buttons, all labeled Action, in both fill and outline styles, in Spectrum for Adobe Express theme.

Spectrum for Adobe Express#

Buttons in Spectrum for Adobe Express have indigo as the color for the accent button and higher contrast for primary and secondary buttons. Spectrum for Adobe Express also uses a different icon set. Other attributes stay the same across themes.

Changelog#

DateNumberNotesSep 12, 20227.0.1
  • Updated disabled text color (from gray-500 to gray-400) and disabled border color (from gray-200 to gray-300)
  • Updated pending state border color (from gray-200 to gray-300)
  • Migrated to the latest token system
Apr 06, 20227.0.0
  • Updated all colors to 6.0.0
Nov 01, 20216.0.0
  • Renamed "call to action" variant to "accent" and added outline style
  • Added style option (removed quiet option)
  • Added static color option (removed "over background" variant)
  • Added hide label option
  • Added justified option
  • Added pending option
  • Added content standards
Sep 29, 20205.3.0
  • Added size option
Apr 29, 20205.2.0
  • Added RTL (right-to-left) guidelines
  • Separated button group into its own component
Apr 13, 20205.1.1
  • Updated keyboard focus state to be more accessible
Aug 22, 20195.1.0
  • Added text overflow behavior
Jul 31, 20195.0.2
  • Updated text to use sentence case
Jun 13, 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 20, 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#

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

check

All platform scales

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

check

Accessible use of color

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

check

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

check

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.

check

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.

check

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.

check

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.