Updated Sep 2, 2022



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:

  • Create Template
  • Terminate Subaccount
  • Update Payment Method

If the action is a common action, the verb + noun rule can be ignored. Examples of common actions include:

  • Cancel
  • Close
  • Reset
  • Next

Button Actions

Most actions will be represented by the Button component.




Indicates the primary action on a page. Should be limited to one per page.


Indicates secondary actions

Muted Outline

Indicates secondary actions when attached to input components


Indicate tertiary actions. Should be accompanied by an icon.

Action Lists

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.