Action

Actions are essential building blocks for the interface that perform inline operations.

Overview

Typically living within other components, Actions are flexible buttons that have an icon, can have a text label, notification style indicator, active state, and other useful properties.

Actions are distinct components, since they are more visually prominent. Whereas, Buttons are suited well for primary operations and call-to-actions such as "Save", "Cancel", "Back", and "Next".

Usage

• Various basic operations, such as:

  • Add
  • Edit
  • Sort
  • Filter

• Commonly used in other components, such as:

  • Action Bar
  • Action Pad
  • Block
  • Panel
  • List

Sample

Accessibility

ARIA attributes

It is recommended to limit the use of ARIA attributes to ensure access and interactivity with your solutions. Developers should evaluate each specified attribute to support more audiences. For instance, if Action toggles another component's visibility on interaction, the expanded property name could be specified to provide additional context to assisitive technologies.

1
2
3
4
5
6
7
8
let actionElExpanded = false;

actionEl.addEventListener("click", () => {
  actionElExpanded = !actionElExpanded;
  actionEl.aria = {
    expanded: actionElExpanded
  }
});

Keyboard navigation

Writing and copy

• Keep text for Action labels simple and succinct
• Avoid using more than 1-2 words in each item
• Do not use punctuation like commas or periods in Action label text
• Do not use contractions (you're, aren't, can't, haven't) in order to reduce confusion
• Avoid writing Action text as questions
• Recommended character maximum for each item: 15

API reference

Properties

Slots

Styles

Methods