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.
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.
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. Text-only quick actions should be no more than two words and 10 characters.
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.
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. The less common or any destructive actions (e.g., delete) should be on the right.
Don't put destructive actions first.
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.
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.
|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.|
|Sep 16, 2019||5.1.0|
|Jul 31, 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.