Action button
Action buttons allow users to perform an action or mark a selection. They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.

Anatomy#

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

Text overflow#
When the action button text is too long for the available horizontal space, it truncates at the end. The full text should be revealed with a tooltip on hover.

Keyboard focus#
An action 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.

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

Windows high contrast mode#
In Windows high contrast mode, action buttons should be displayed using the high contrast theme-specified colors for buttons. By default, borders and icons should be the same color as the button text color. Quiet action buttons do not have a border in default and disabled states. In hover and keyboard focus states, a border should display as the button border color. In the disabled state, border, icon, and text color should display as the disabled color.
Usage guidelines#
Use tooltips#
Icon-only action buttons can be hard to identify. They should always show a tooltip upon hovering for a short period of time, displaying the name and possibly a keyboard shortcut.


Isolated action buttons#
If you have an icon-only or text-only isolated action button, use the standard style to make sure it’s more easily identifiable as a button.


Only group related actions with a hold icon#
When using a hold icon to switch actions, only group the actions that are part of the same family. Don't group unrelated actions just for the sake of saving space.




Respect hold icon placement#
In left-to-right interfaces, the hold icon is always in the bottom right corner of the action button. It's a symbolic indicator that shows that a popover menu will appear on hold. Don't change the placement of the hold icon based on the design of the interface.




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.




Selected state text color#
The text color on the selected state of the over-background variant can be customized to match the background it’s on. Use the background color for selected text when the action button is on a solid color, and is dark enough to meet a 4.5:1 contrast ratio with a white background (or black background, for the static black variant).
Use black text when the button is on top of an image, or if the background is too low-contrast to meet the 4.5:1 contrast ratio.




Internationalization#
Keyboard interactions#
When an action button does not feature a hold icon:
When an action button features a hold icon:
Changelog#
- Updated colors for non-emphasized selected state
- Updated icon colors to match text color
- Updated keyboard focus state for non-quiet buttons to use focus ring
- Updated disabled text and icon color (from gray-500 to gray-400)
- Updated all colors to 6.0.0
- Added extra-small size
- Updated label option to required
- Added hide label option
- Added cursor direction behavior
- Added static color option and usage guidelines
- Added size option
- Updated current (medium) size to accommodate multiple sizes
- Updated keyboard focus state design for emphasized action buttons
- Updated background color to be consistent between selected action buttons
- Removed border in selected quiet action button in UI kit (bug)
- Separated action group into its own component
- Updated border color to be more accessible
- Added text overflow behavior
- Added group overflow behavior
- Added emphasis (“emphasized/not emphasized”)
- Combined tool component with this component
- Updated text to use sentence case
- This component is now individually versioned (individual versions of existing components start at 5.0.0)
- Added RTL (right-to-left) guidelines
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).

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

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

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.

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.

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.