Actions represent components that initiate a task or operation, or provide navigation
Actions represent components and UI elements that a user interacts with to initiate a task or operation, or to navigate. Actions are typically represented as Buttons. Choosing the right component and component variants depends on the action’s importance and its context within a page.
Actions should almost always be labeled with a short, concise, verb + noun combination. Some examples include:
If the action is a common action, the verb + noun rule can be ignored. Examples of common actions include:
Most actions will be represented by the Button component.
Variant | Usage |
Filled | Indicates the primary action on a page. Should be limited to one per page. |
Outline | Indicates secondary actions |
Muted Outline | Indicates secondary actions when attached to input components |
Text | Indicate tertiary actions. Should be accompanied by an icon. |
Actions can also be displayed through an ActionList placed inside a Popover. These are typically used for a group of secondary actions localized to a single entity such as a table row or a detail page. Actions in this context should have equal importance with each other as there is no opportunity to establish visual hierarchy.
Links are typically used for navigation, but in rare occurrences can be used to initiate an action where a tertiary text Button will not work. Use links as actions sparingly, and only for very unimportant actions.