Snackbar
带操作提示条
Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
Live Demo
Actually clickableCurrently: 3
What you just saw:The "Message deleted · Undo" bar at the bottom of Gmail after deleting an email, the "Ad skipped · Restore" bar at the bottom of YouTube after dismissing an ad — both have a tappable action.
What it actually is
The only difference between a snackbar and a toast is whether it can do something. The moment it offers an undo button it becomes the safety net for dangerous operations. That is also why Google insists deletes get a snackbar rather than a confirmation dialog.
Anatomy · What it's made of
Container容器
Usually centered at the bottom of the screen
Message消息
Passive voice: "Message deleted"
Action操作按钮
Such as "Undo" or "Retry"
Duration时长
Give it 5–10 seconds when there is an undo
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| You want to offer an undo after a delete, move, or similar operation | Yes |
| The action already took effect and the user might change their mind | Yes |
| You want to avoid the interruption of a confirmation dialog | Yes |
| You only need to report success with no follow-up action at all | Depends |
If the undo window is only 3 seconds, that is too short for important content — either extend the duration or use a confirmation dialog.
When there is a bottom navigation bar, the snackbar has to shift up or the nav bar will cover it.
Similar Patterns
Don't mix these upSnackbarCurrent
带操作提示条
Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
In one line:Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Snackbar
带操作提示条
Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
Destructive Action
破坏性操作
An action that is hard to undo once taken — delete, clear, deactivate. Its button has to be red.
How to tell AI
Three levels of promptAdd the component name and specifics
After a photo is deleted, show a snackbar at the bottom: "1 photo deleted" plus an "Undo" button, auto-dismissing after 5 seconds; shift it up by 80px when there is bottom navigation.
Don't just say this to AI
Bad → BetterDon't say this to AI
Show a confirmation after deleting.
Say this instead
After a delete, show a bottom snackbar: "1 photo deleted" + an "Undo" text button, auto-dismissing after 5 seconds (countdown pauses on hover), shifted up when there is bottom navigation, with role="status" + aria-live="polite".
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.