Best Practices

Properties

Value	Usage
`primary`	Only one at a time, for the most frequently triggered action in a container.
`secondary`	Occasionally triggered actions.
`tertiary`	Actions that are rarely triggered actions or that exist multiple times in a Page.
`critical` or `criticalTertiary`	Irreversible actions. Prefer to keep actions reversible and not use this.

Value	Usage
`large`	Header or footer of Page and Modal.
`normal`	Most scenarios.

Reuse existing labels.
Always include a verb in the infinitive followed by an object. For example, Create product.
Use a verb that reflects the exact action. For example, use Publish instead of Confirm.
Use sentence case but capitalize proper nouns.
Don’t use punctuation, more than three words, or personal pronouns.

Include an icon before the label whenever the action can be represented by an icon, especially when it’s part of a group of actions.
If the button opens a page in a new tab, include an IconArrowUpRightSmall after the label.
Use an IconButton if the the label of an action should not be visible.

Position in a container: In most scenarios, list actions horizontally, right-aligned, and vertically centered. In a form, left-align actions that modify content and right-align those that submit.
Order of actions in a list: In a horizontal list, order from tertiary to primary. In a vertical list, from primary to tertiary.
Pairing a secondary action with other actions: Use a secondary action alone, next to one primary action, or next to one or more tertiary actions. Don’t include more than one secondary action in a group.
Pairing a tertiary action with other content: Use the Bleed component to ignore the box of a tertiary or tertiaryCritical action and align it based on its icon and/or label.

Use a disabled action only if it becomes enabled in some condition. For example, a Save action that is only enabled when edits have been made.
When the reason why an action is disabled might be unclear, leave the action enabled and show a modal explaining it when triggered.
Don’t display a Tooltip when hovering a disabled action.

Use only for actions that usually take more than 1s and less than 5s to process.
Don’t show loading or progress indicators for actions that take less than 1s to process.
If the action takes more than 5s to process, display progress feedback in an overlay.

Display a ConfirmationModal when the action is irreversible. For example, a Delete action where it isn’t possible to restore the item from the trash.
Display a ConfirmationModal when the action takes considerable time to undo. For example, a Publish action that takes time and can’t be canceled while in progress.