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:
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Presses the component. |
Enter | Presses the component. |
Tab | Moves focus in and out of the component. |
Tab and Shift | Moves 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