Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Live Demo
Actually clickableWhat you just saw:The "Sent" that drifts down at the top of the screen after sending a message, the "Saved to Photos" that flashes in the bottom-right corner after saving an image — both are toasts.
What it actually is
A toast says exactly one thing: the action you just took succeeded. It has no buttons — if you need an action, use a Snackbar — it never blocks the user, and it disappears by itself. Its job is a momentary confirmation, not a message that demands attention.
Anatomy · What it's made of
Container容器
Dark background, white text, border-radius 8px
Icon图标
Success ✓ / failure ! / info i
Message文案
One sentence, ≤20 characters
Duration时长
Auto-dismisses after 2–4 seconds
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| An action succeeded and needs a one-line confirmation | Yes |
| You do not want to interrupt what the user is doing | Yes |
| The information is simple and requires nothing from the user | Yes |
| The user has to make a choice (undo / retry) | No |
| You need to convey a serious error | No |
The moment you put an "Undo" button inside it, it has become a snackbar — do not mix the two.
Repeated actions make toasts stack into a column, which reads like something has gone wrong.
Similar Patterns
Don't mix these upToastCurrent
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Snackbar
带操作提示条
Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
In one line:A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Snackbar
带操作提示条
Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Banner
横幅提示
A full-width strip pinned to the top or bottom of the page that carries a message about the whole app.
Badge
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
How to tell AI
Three levels of promptAdd the component name and specifics
After a successful save, show the toast "Photo saved" — dark background, white text, a checkmark icon, centered at the top of the screen, fading out automatically after 2.5 seconds.
Don't just say this to AI
Bad → BetterDon't say this to AI
Show a confirmation after the action.
Say this instead
After a successful action, show a toast: dark background, white text, a circular icon, centered at the top, auto-dismissing after 3 seconds, with role="status" + aria-live="polite", and replace instead of stacking when triggered again.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.