Common actions

Use common actions the same way across the platform to keep things clear and consistent.

Published: Last updated:

Common actions frequently appear across different components and workflows. For platform consistency, these actions should only be applied in the ways described below.

Add

Add places an existing item into a list, set, or system, such as adding a document to a folder.

Hierarchy and placement

The emphasis of the add action should reflect its importance within the page. It may appear as high, medium, or low emphasis depending on the context. For example, if adding an item is the primary task on a page, use a single primary button, with any supporting actions styled as secondary.

Considerations

Clear messaging helps reduce uncertainty for users. When presenting an add action, consider the following:

  • What are the implications of the action for the user? Are there financial, access, or legal considerations?
  • Does the user have the correct permissions to perform this action?
  • Is the action permanent or reversible?
  • How long will the action take to complete (seconds, minutes, hours, or days)?
  • What should the user do if the action fails?
  • Is the action applied to a single item or multiple items at once?

Cancel

Cancel stops the current action and closes the component or item. If stopping the process could lead to negative outcomes, such as data loss or corruption, warn the user before cancelling.

Use a ghost button or a link for cancel actions.

Cancel

Clear

Clear removes data from a field or removes selections. It can also remove the contents of something, such as a document or log. For controls that have a default value or selection, like radio buttons, the default state is restored.

Use the close icon on the right side of a field, item, or value to perform a clear action.

Validation message
Tag label Tag label Tag label

Continue

Continue moves the user forward to the next step in a sequence, such as in a form or multi-step flow.

Represent Continue with a large button.

Cancel

Close

Close terminates the current page, window, or menu. Close is also used to dismiss information, such as notifications.

Use the close button, which is typically placed on the upper right side of the element.

Copy

Copy creates a duplicate of the selected object or objects.

Use the copy icon, with a confirmation tooltip such as “Copied” shown after click or tap.

Delete

Delete permanently removes an object. Because delete actions are usually irreversible, warn users about any consequences, such as loss of data. Use a bin icon, a danger button, or a danger option in a menu.

Low-impact deletion

Use when the deleted data can be easily restored or recreated. In these cases, the item can be deleted immediately on click or tap without additional confirmation.

Moderate-impact deletion

Use when the action cannot be undone or the data would be difficult to recreate. This pattern is also appropriate when deleting multiple items. Ask the user to confirm the deletion and clearly explain what will happen if they proceed.

High-impact deletion

Use when recreating the data would be costly or time-consuming, when large amounts of data are affected, or when other important items will also be removed. In addition to a confirmation dialog, require the user to type the name of the resource being deleted to confirm the action.

Low-impact deletion

Use when the deleted data can be easily restored or recreated. In these cases, the item can be deleted immediately on click or tap without additional confirmation.

Edit

Edit allows data or values to be changed. It typically triggers a state change that enables the selected object or field to be modified.

Provide edit as an option in a menu, or as a button and using the edit icon.

Errors

Errors occur when an action or process fails. They can appear within pages, form fields, alerts, toasts or modals. Error messages should clearly explain what happened and provide guidance on how the user can continue.

Your address

Validation message
Validation message
Validation message
Validation message
Validation message
Back

Consider directing the user back to a previous state, a support page, or offering clear recommendations. Error messages should be honest, helpful, and guide the user toward the next step.

Some components, such as text inputs and form fields, provide limited space for error handling. In these cases, use concise inline error messages and carefully consider their placement to ensure they remain clear and visible.

Content guidelines

Keep error messages brief, honest, and supportive. Clearly explain what happened and what the user can do to resolve the issue.

For full-page errors or large modals, limit messages to around three lines of text. For form field errors, keep messages to two lines or fewer.

Remove

Remove takes an object out of a list or item without deleting it. Unlike delete, the object is not destroyed and may still exist elsewhere. Multiple objects can be removed at once.

Hierarchy and placement

Represent remove as a button with minus icon. Remove actions are rarely the primary action on a page and should not be given strong visual emphasis.

Considerations

  • What are the implications of the remove action for the user? Consider financial, access, or legal impacts.
  • This action can easily be confused with deleting, so ensure the distinction is clear.
  • Confirm the user has the correct permissions to perform the action.
  • Inform the user if the result is permanent.
  • Consider how long the action may take — seconds, minutes, hours, or days.
  • Provide guidance on what the user should do if the removal fails.
  • Determine whether the action applies to a single item or multiple items.