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

Sample

Accessibility

Keyboard navigation

KeyFunction
SpacePresses the component.
EnterPresses the component.
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.

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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.