Snackbar
A brief, auto-dismissing notification at the bottom of the screen that confirms a completed action or surfaces a non-critical message.
Plain English
A snackbar is the humblest notification — it appears briefly at the bottom, confirms something just happened ("Message sent," "File deleted," "Changes saved"), and disappears on its own in 3–5 seconds. Unlike a toast (which often appears top-right and may persist), snackbars live at the bottom, stay brief, and are closely tied to a just-completed action. They should never interrupt the user's task — never stack them, never make them modal, and never use them for errors requiring a decision. One optional affordance: an "Undo" link for destructive actions.
Technical
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1e293b; color: white; padding: 12px 20px; border-radius: 8px; font-size: 14px; z-index: 9999; max-width: calc(100% - 48px). Enter: translateY(calc(100% + 24px)) → translateY(0), opacity 0 → 1, 200ms ease-out. Auto-dismiss: setTimeout 3000ms. ARIA: role="status" aria-live="polite". Mobile: increase bottom to 72px to avoid home indicator.
Live Demo
Snackbar notifications
Snackbars confirm past actions — keep them brief, auto-dismissing, and non-blocking.
Usage
✓ Good usage
After the user deletes a file, a snackbar appears for 4 seconds saying "File deleted" with an "Undo" link — the action is confirmed, reversible, and the interface remains usable.
✗ Bad usage
A snackbar asking "Are you sure you want to delete this account?" — snackbars auto-dismiss; decisions requiring confirmation need a dialog.
Recommended values
- Duration: 3–5 seconds before auto-dismiss
- Max width: 400px or calc(100% - 48px)
- Enter animation: translateY up from bottom, 200ms ease-out
- Position: bottom center on mobile, bottom-left on desktop
- ARIA: role="status" aria-live="polite"
- Mobile clearance: bottom: 72px to clear iOS home indicator
Common mistakes
- Using snackbars for errors — errors require attention and often an action; do not auto-dismiss them.
- Stacking multiple snackbars — queue them; showing 3 simultaneous snackbars overwhelms users.
- Blocking UI on mobile — a snackbar at bottom: 24px overlaps the bottom navigation on many apps; use bottom: 72px.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add snackbar notifications to the app. Show a success snackbar (green) after saving, an error snackbar (red) after failed operations, and an info snackbar (blue) after bulk actions. Position bottom-center. Auto-dismiss after 4 seconds. Include an Undo option on destructive snackbars. Use role="status" aria-live="polite". Queue multiple snackbars rather than stacking.