Matchbox
Updated Jul 30, 2021

Actions

PATTERNS

Actions represent components that initiate a task or operation, or provide navigation

Overview

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.

Language

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.

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.

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.