toast
A succinct message that is displayed temporarily.
default
positioning
multi-line
preserve
action
undo
success
warning
error
best practices
When to use
- Use
toastfor non-blocking acknowledgements of user-initiated actions, such asDomain added,Project archived, orDeployment canceled. - Do not use a toast alone for billing failures, permission denials, or build failures that require investigation. Pair a short toast with a persistent recovery step and stable identifier.
- Keep field validation beside the
Input; use a persistentNoteorBannerfor configuration warnings.
Behavior
- Toasts auto-dismiss by default. Pass
preserve: trueonly when the user must read or act on the message before it disappears. - Undo snackbars should stay visible for 5–10 seconds and pair a past-tense message
with one
Undoaction. Use theonUndoActionoption only when the rollback is safe. - Do not stack toasts to narrate one asynchronous flow. Show one message at the terminal step instead.
Content
- Use one sentence, sentence case, and no trailing period for a single-sentence toast.
- Completion messages follow
Noun + past participle:Blob deletedorEnvironment variable saved. Do not addsuccessfully. - Error messages use two sentences and end with a recovery step:
Couldn't verify domain. Try again.. UseCouldn'tfor user-state errors andFailed tofor system or infrastructure failures. - Match the toast verb to the triggering action:
Delete ProjectbecomesProject deleted. Use the literalUndolabel, notRestoreorBring Back.
Accessibility
- Keep the toast region
aria-live="polite"; reserve assertive announcements for blocking errors that must interrupt the current flow. - Keep action and dismiss controls keyboard reachable. Do not put primary navigation inside a toast because transient content can disappear before keyboard users reach it.