Notifications and toasts: what to say, where and how loudly
Five kinds of messages from quiet to loud, a toast with “Undo”, where it appears on a phone, words that help and one message instead of five — with live examples.
In short
A notification tells the person what happened when it cannot be seen by itself. Its loudness depends on importance: a badge for something new, a line next to the button for a result right where the action was, a toast for a success that is not visible on screen, a banner for a problem that affects the whole page, and a window only when an answer is needed now. Errors in forms stay next to the fields and do not disappear. A toast stays long enough to be read, pauses while the cursor or the focus is on it, does not cover the main buttons and offers “Undo” instead of asking “Are you sure?” beforehand. The text says what happened and what to do next — no error codes and no “Success!”. Messages come one at a time, and screen readers hear them through a live region without losing their place.
From quiet to loud
Five kinds of messages. The louder it is, the more it interrupts — so the loud ones are rare.
Which kind for which message
The kind is chosen by two questions: is it visible without a message, and must the person do something?
| Message | Kind | Disappears |
|---|---|---|
| “Copied”, “Saved” | a line next to the button or a toast | yes, after 4–6 seconds |
| A deletion that can be undone | a toast with “Undo” | yes, but not sooner than in 7 seconds, and not under the cursor |
| An error in a form | next to the field and in a list at the top | no, until it is fixed |
| No network, the session is ending | a banner at the top | no, while the problem lasts |
| A new message or order | a badge on the icon | when it is read |
| Data lost for good | a window | only after an answer |
“Undo” instead of “Are you sure?”
Delete the photo and look at the message at the bottom: it has an action, a time bar and stops while you point at it.
Photos of “Kitchen on Forest Street”
Press “Delete” and move the cursor over the message: while it is there, the time stops. “Undo” cancels the deletion — no “Are you sure?” was needed.
A question before every deletion is answered automatically after the third time. An undo after the fact does not slow anyone down and saves the one who made a mistake. Such a message needs time: a person has to read it, understand it and reach the button — that is why it does not disappear sooner than in about seven seconds and waits while the cursor or the keyboard focus is on it.
Where a toast appears
At the bottom of a phone the thumb is busy with the main buttons. A message must not cover them, even for a few seconds.
On a phone toasts appear above the bottom bar or the buy button; on a desktop — in a corner away from the main actions. The place is the same on every page, so the eye knows where to look.
What happened and what to do
An error code helps the developer, not the person. A good message has two parts: what happened and the next step.
One message instead of five
Five quick additions to the cart — five identical toasts covering the page. One message with a total and a next step says more.
Notifications in code: 3 examples
Live regions that screen readers listen to, a toast with an action and a timer that waits, and styles that keep it clear of the bottom bar.
Live regions
status is read when the reader is free, alert interrupts — only for errors. The regions are in the page from the start.
<!-- Toasts: read politely, without moving the focus -->
<div class="toasts" role="status" aria-live="polite"></div>
<!-- A banner for a problem that affects the whole page -->
<div class="banner" role="alert" hidden>
You are offline. Changes will be saved when the network is back.
</div>
<!-- A result right next to the action -->
<button class="button" type="button" data-copy-link>Copy link</button>
<span class="copy-result" role="status"></span>A toast with an action
The timer stops under the cursor and the focus; a new message replaces the old one.
const region = document.querySelector('.toasts');
function toast(text, { action, onAction, duration = 7000 } = {}) {
const item = document.createElement('div');
item.className = 'toast';
item.textContent = text;
if (action) {
const button = document.createElement('button');
button.type = 'button';
button.textContent = action;
button.addEventListener('click', () => {
onAction?.();
item.remove();
});
item.append(button);
}
// The time stops while the cursor or the focus is on the message
let timer;
const start = () => { timer = setTimeout(() => item.remove(), duration); };
const stop = () => clearTimeout(timer);
item.addEventListener('mouseenter', stop);
item.addEventListener('mouseleave', start);
item.addEventListener('focusin', stop);
item.addEventListener('focusout', start);
region.replaceChildren(item); // one at a time: the new message replaces the old one
start();
}
toast('Photo deleted', { action: 'Undo', onAction: restorePhoto });Place and appearance
On a phone the toast stands above the bottom bar, on a desktop — in the bottom left corner.
/* If the page has a sticky buy bar, its height lifts the toasts */
body:has(.buy-bar) { --bottom-bar: 4.5rem; }
.toasts {
position: fixed;
inset-inline: var(--space-4);
bottom: calc(var(--space-4) + var(--bottom-bar, 0px) + env(safe-area-inset-bottom));
z-index: 20;
display: grid;
justify-items: center;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: var(--space-4);
max-width: 28rem;
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--color-surface-inverse);
color: var(--color-text-inverse);
pointer-events: auto;
animation: toast-in var(--duration-base) ease-out;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(0.5rem); }
}
/* Desktop: bottom left, away from the main buttons */
@media (min-width: 48rem) {
.toasts { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
.toast { animation: none; }
}7 rules for notifications
-
01
Loudness by importance
A badge, a line, a toast, a banner, a window — from rare to very rare.
-
02
Next to the action
If the result can be shown where the button is, a toast is not needed.
-
03
“Undo” instead of a question
An undo after the action is faster and safer than “Are you sure?” before it.
-
04
Time to read
About seven seconds for a toast with an action, a pause under the cursor; errors do not disappear.
-
05
Do not cover the buttons
Above the bottom bar on a phone, in a corner on a desktop.
-
06
One at a time
Identical messages are merged into one with a total.
-
07
Heard by screen readers
role="status" for news, role="alert" for errors; the focus stays where it was.
Common mistakes with notifications
-
A form error in a toast
The message disappears, and the person is left looking for what was wrong.
-
Gone in two seconds
People notice that something flashed but not what.
-
A code instead of words
“Error 500” does not say what happened or what to do.
-
A toast over the buy button
For a few seconds the main action cannot be pressed.
-
A stack of identical messages
Five toasts cover half the screen and say the same thing.
-
“Success!” for every action
If the result is visible on screen, a message only adds noise.
Questions about notifications
How long should a toast stay on screen?
Four to six seconds for a short text, about seven with an action, and as long as needed while the cursor or the focus is on it. Errors stay until they are fixed.
Where should toasts appear?
At the bottom on a phone, above any bottom bar; on a desktop in a corner, away from the main buttons — in the same place on every page.
A toast or a message next to the button?
Next to the button when the action and the result are in one place: copying, a field, a filter. A toast when the result happens elsewhere or in the background.
Should a success be reported at all?
When it cannot be seen by itself: a request sent, data saved in the background. If the change is visible, no message is needed.
How do screen readers learn about a toast?
Through a live region: role="status" is read when the reader is free, role="alert" interrupts it — that is only for errors.
Does a site need a notification centre?
In a product with many events — orders, messages, comments — yes: a list with a badge. A regular site does not need one.
Online form
An interface
that answers
I design products where every action gets a clear answer — in the right place and with the right volume. Tell me about the project — I answer within one working day.