Overlays & feedback
Toast / Snackbar
A brief, non-blocking status bar that appears after an action and dismisses itself.
Also known as snackbar · status bar · auto-dismiss notice
Demo · not production-ready code
Prompt for AI
Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.
Your stack
Shapes the prompt you copy
React + Tailwind + shadcn/ui · EN
Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling). Task: implement "Toast / Snackbar". Add a toast (snackbar) notification: a small non-blocking status bar that appears after an action, auto-dismisses after ~2s, uses role="status" with aria-live="polite", and never traps focus. Anatomy: - container: Rounded surface bar, usually top or bottom center. - icon: Optional success / error / loading glyph. - action: At most one, usually Undo. More than one means you need a different pattern. Preferred API / pattern: `sonner toast() / shadcn Toast` Keep scope minimal: only this UI pattern, match existing project style.
Acceptance checks
- ○Avoid: Using role="alert" instead of role="status"
- ○Avoid: Putting Confirm / Cancel inside a toast
- ○Avoid: Stacking every trigger into a pile
- ○Avoid: Dismiss timing too short for long copy
In plain wordsHow people search for it
“the little bar that pops up saying 'Saved' and disappears on its own”“a message that fades in at the top then goes away by itself”“a status note I don't have to close”
AnatomyOpen for part names
- container
- Rounded surface bar, usually top or bottom center.
- icon
- Optional success / error / loading glyph.
- action
- At most one, usually Undo. More than one means you need a different pattern.
How to write itOpen for stack patterns
Web (HTML/CSS)
role="status" + aria-live="polite"React + Tailwind + shadcn/ui
sonner toast() / shadcn ToastSwiftUI
overlay + task { try? await Task.sleep }Ant Design
message.success() / useApp().messageNotes
Three traits: auto-dismiss, mostly non-interactive (one undo max), never blocks the page. If the user must decide, use a modal. On web use polite live regions so screen readers are not interrupted. Stack toasts carefully—dedupe or replace instead of piling ten identical bars.
Common mistakesHumans and models trip here
- Using role="alert" instead of role="status": alert interrupts the screen reader; reserve it for errors.
- Putting Confirm / Cancel inside a toast: it will vanish before the user can decide—use a modal.
- Stacking every trigger into a pile: dedupe or replace the same message instead of ten copies.
- Dismiss timing too short for long copy: short lines ~2s, longer copy needs 5s+.
More failure symptoms on AI broke it.
Related vibesLooks often pair with
Related patterns
Spotted a wrong name or missing pattern?