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.
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.
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.
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.
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.
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.
Icons can be used in buttons when additional clarity is required. Icons should not be used for decoration.
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.
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.
When the button text is too long for the horizontal space available, it wraps to form another line.
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.
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.
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.
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.
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.
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.
Button text should always be in sentence case. Capitalization should never be used to give more prominence to a specific button.
Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.
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.
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.
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.
|Space or Enter||Executes 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.|
|Aug 22, 2019||5.1.0|
|Jul 31, 2019||5.0.2|
|Jun 12, 2019||5.0.1|
|Apr 19, 2019||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.