Version 5.1.0

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
Behaviors
Usage guidelines
Keyboard interactions
Changelog
Design checklist

Anatomy#

Image illustrating through labels the component parts of a quick action, including either an icon-only action button group or text-only action button group atop a small floating panel, which makes up quick actions.

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. Text-only quick actions should be no more than two words and 10 characters.

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.

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.

Key example of quick actions using all icon-only action buttons.

Key example of quick actions incorrectly using a mix of text-only action buttons and icon-only action buttons.

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.

Key example of a quick action with an edit action on the left, and destructive delete action on the right.

Key example of a quick action incorrectly ordering actions with a destructive action on the furthest left side of the panel, and edit action 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.

Image illustrating the use of bulk actions as a secondary way to perform actions on a card. The card in the image is selected, and edit, copy, and delete actions are listed above, indicating that all cards that are selected could have the same action performed on them.

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.

Key example of the correct way to wrap actions when some actions are less common or there are too many to fit across the top of the container. In this case, there is an edit action, copy action, and the rest of the actions are hidden in a more actions menu.

Key example of the incorrect way to wrap actions when some actions are less common or there are too many to fit across the top of the container. In this case, there is an edit action, copy action, move action, delete action, and then wrapped to a second row of actions is a search action.

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.

Changelog#

Date	Number	Notes
Sep 16, 2019	5.1.0	Added a drop shadow to the container
Jul 31, 2019	5.0.1	Updated text to use sentence case
Apr 19, 2019	5.0.0	This component is now individually versioned (individual versions of existing components start at 5.0.0)

Design checklist#

N/A

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

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

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

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.

Downloadable UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.

Link

Axis