toast

A toast is a short message at the bottom of the screen that confirms an action someone just took, such as “8 episodes queued”. It never takes focus, it waits for a pause before a screen reader reads it, and it leaves on its own.

when to use

To confirm an action the person just took, once it is done or under way: “8 episodes queued”, “Settings saved”, “Asking the catalog again — the list follows”.
When the result shows on the page as well, such as rows that change to “on its way”, and the toast only says that it happened.
After an action on several items from a selection toolbar, with the count: “8 episodes queued · 3 skipped: held already or under way”.

when to use something else

For an error that needs acting on. Use an error banner with a way forward. An error has to stay until it is resolved, offer “try again”, and be announced at once. A toast does none of that: it leaves after five seconds, can't take focus, holds no button, and is read only when the screen reader has a pause.
For a condition that lasts, such as “2 sources are over their daily limit”. Use a banner.
To ask something, or to offer undo or a link. A toast has nothing to press. When an action can't be undone, ask first, in a modal.
For the state of one item. That is a status in its row.
For anything people must not miss. After five seconds it is gone, and nothing brings it back.

anatomy

Toaster. The place where toasts appear: at the bottom of the screen, in the middle, above everything else on the page, an open modal or action menu included. It is a region named “notifications”. It never reaches the edges of the screen, and clicks pass through it everywhere except on the toasts.
List. The toasts, stacked a small step apart and centred, with the newest at the bottom.
Toast. A square box with a thin frame and a bar in the state's colour on its left edge. Its text is in the body face, because a toast is read. It slides up a little as it fades in; with reduced motion it simply appears. It leaves without an animation.
Glyph. The state's small symbol, in its colour. Assistive technology skips it.
Message. The text, in sentence case.

variants and states

The state sets the glyph and the colour of the bar.

state	use it for	for example
Neutral (the default)	A plain fact about what happened	“3 skipped: held already or under way”
Information	Something started that finishes later	“Asking the catalog again — the list follows”
Success	Done	“8 episodes queued”, “Settings saved”
Warning	Done, with a part that didn't go through	“6 queued · 2 skipped: their source is over its daily limit”

There is an error state too. Don't use it: an error belongs in a banner, as when to use something else explains.

At most three toasts show at a time. A fourth pushes out the oldest at once.

An action people repeat can replace its own toast instead of adding another one. Press this one a few times: one toast stays, with its text and its timer renewed.

behaviour

Nothing in a toast can take focus, so a toast has no keys: tab never reaches it, and esc does nothing. It leaves on its own.
Timing. A toast leaves after five seconds, counted from when it shows. While the pointer rests on it, the count pauses; when the pointer moves off, the count goes on with the time that was left.
The queue. A toast that replaces one already showing takes the newest place, with a fresh timer.

The full keyboard map is on the toast's React page.

accessibility

The toaster is a region named “notifications”. A screen reader reads each new toast once, after whatever it is saying. A toast that leaves is not announced.
Nothing takes focus. A toast never moves the reader, never interrupts typing, and adds no tab stop.
The glyph is hidden from assistive technology. A warning or error toast says its state first, such as “warning: …”, like a status. The calmer states read only the message, so put what matters in the words: “6 queued · 2 skipped”.
With reduced motion, toasts appear without sliding in.

Today:

Only the pointer can pause a toast. People who use a keyboard or a screen reader can't pause it or bring it back, so a toast must never be the only record of what happened: the page shows the result too (WCAG 2.2.1).
There is no way to dismiss a single toast by hand, with the pointer or with the keyboard. It leaves when its time is up.

content

What just happened, with the object and the count: “8 episodes queued”, “Settings saved”, “api-7f9c restarted”. Write it in sentence case, because the message is in the body face, the reader's language, and leave out the full stop. Use the past tense for what is done, and the -ing form for what is under way.
A part that didn't go through follows a middle dot (·), with the reason: “8 episodes queued · 3 skipped: held already or under way”.
One line. A toast leaves after five seconds, so it has to be read at a glance.
Text only. A link or a button in a toast would vanish after five seconds, and the keyboard couldn't reach it.
Never an error that needs doing something about. That is a banner.

do and don't

What just happened, with the count: read at a glance, and the rows show the result too.

don't

An error that needs acting on leaves after five seconds, can't take focus and offers no way forward. Put it in a banner with “try again”.

One short line. A part that didn't go through follows the dot, with its reason.