Skip to content
UX Atlas
ComponentCraft conventionFoundational

Toast

A brief confirmation that disappears, which makes it unsuitable for anything the user must act on.

Definition

A toast is a transient message confirming that something happened. Because it vanishes, it can only carry information the user does not need to keep or act on later.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Rules
  3. Continue from here

Rules

  • Confirmations only. Errors that need action belong inline, next to their cause.
  • Duration proportional to length, with a minimum of about four seconds and pause on hover or focus.
  • If a toast contains an action such as undo, it must not disappear before the action can realistically be taken, and the action must also exist elsewhere.
  • Announce through a polite live region. Assertive interrupts the screen reader and should be reserved for genuine urgency.
  • Stack a limited number and collapse the rest, rather than filling the screen.
  • Position consistently, and away from the primary interactive area on mobile.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Mobile AppAn AI Product

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Commonly confused with

Close enough to be mixed up, different enough to matter.

  • Alert and Inline MessageComponent

    An inline alert stays with the thing it describes. A toast disappears, so it cannot carry anything important.

Practical example

A worked decision where this was the deciding factor.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.