Spectrum
Quick actions
Quick actions allow users to perform contextual actions when hovering or focusing on a specific component. They're shortcuts meant to make workflows more efficient.
Table of contents#
Anatomy#
Options#
Icon-only#
For actions that are simple and common, we recommend using icon-only action buttons because they take up less space. Be sure that the icons used are easily recognizable.
Text-only#
Quick actions can also be text-only. These should be used when icons are not enough to convey actions that may be too vague, abstract, or uncommon. Limit the label to no more than two words or 10 characters (in English), and write in sentence case.
Behaviors#
Action button overflow#
When there are too many actions to fit horizontally, expose the most common actions and group the rest under a “more” action button. The remaining actions can then be exposed in a popover menu.
Windows high contrast mode#
In Windows high contrast mode, quick actions should be displayed using the high contrast theme-specified colors for buttons. The quick actions container should have a border matching the button text color. Quiet action buttons used within the quick actions should conform to quiet action button designs.
Usage guidelines#
Don’t mix icons and text#
Except for the more ("...") icon in an action button group overflow, display either icon-only or text-only actions. Don't mix the two. Avoiding the mix guarantees that users can quickly and clearly parse the actions presented and do not associate icons and text that are not related.
Place the most common actions to the left#
Place the most common actions to the left. The less common or any destructive actions (e.g., "delete") should be on the right.
Don't put destructive actions first.
Use quick actions as shortcuts only#
Quick actions should not be used as the only way to perform those specific actions. Users should still be able to take action, whether on a specific item or in bulk, without quick actions. These are intended to act as shortcuts to speed up the workflow since they only appear on hover.
Don't wrap actions#
When there are too many actions to fit horizontally, expose the most common actions and group the rest under a “more” action. The remaining actions can then be exposed in a fly-out menu. Do not wrap actions onto a second line.
Keyboard interactions#
| Key | Interaction |
|---|---|
| Tab | Moves forward through the list in the dominant reading order (LTR or RTL); displays tooltip if available. |
| Shift + Tab | Moves in the opposite direction; hides tooltip if visible. |
| Enter / Return | Activates button/opens menu and moves focus to first item in submenu. |
Theming#
A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.
Spectrum for Adobe Express#
Quick actions in Spectrum for Adobe Express have a more rounded container with a more prominent drop shadow. This theme also uses a different icon set.
Changelog#
| Date | Number | Notes |
|---|---|---|
| Apr 06, 2022 | 6.0.0 |
|
| Sep 16, 2019 | 5.1.0 |
|
| Jul 31, 2019 | 5.0.1 |
|
| Apr 20, 2019 | 5.0.0 |
|
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.
Link