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.

Choose an icon that is easily recognizable by itself. For example, the Close, Forward, and Back icons.
Don’t leave an IconButton without an alternative label. Always add one in the aria-label prop.
If there’s no easily recognizable icon, prefer to position the action inside a Menu. Don’t use a Tooltip to display the label.

Considering left-to-right interfaces:

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.