Actions

Quick Actions or Actionbar

Planned

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.

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.

Start or End

Items in a Quick Actions can be displayed from left to right or right to left.

Hover Show

It is sometimes helpful to hide items in a Quick Actions component in order to keep the screen legible. A good example would be when they are placed inline in a table row. In this case, Display the "more" item, and display the other when the row is hovered. The "more" item should always be displayed in order to provide a place for touch screen users to click to display the hidden items in a dropdown.

Dropdown

In some cases, the actionbar may be condensed under a "more" icon. In this case, clicking more will display the items in a dropdown component.

Inline

The quick actions can be displayed inline instead of as a layover on the content.

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.

Implementation

Example Name

Description and implementation notes

<p> code example </p>

Information

Checklist

All interactive states

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

All Color Schemes

Works properly across all color schemes (light, dark).

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

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 Figma file that shows multiple options, states, color themes, and platform scales.

Examples