Website Notification System Design (Toast/Snackbar)
Toast and Snackbar are temporary notifications that appear over the interface and automatically disappear. The difference is in origin: Snackbar is a term from Material Design (Google), Toast is from mobile development (Android). In web these terms are often interchangeable. The essence is the same: a brief message about the result of an action, which doesn't require a response.
When to Use Toast
Toast is a confirmation, not a warning. It informs about completion of an action the user has already taken.
Appropriate:
- "File saved" after Ctrl+S
- "Link copied" after clicking copy
- "User deleted" after deletion confirmation
- "Changes applied" after form save
Not appropriate:
- Critical errors requiring attention (use modal or inline error)
- Warnings before action (use confirmation dialog)
- Long messages with multiple actions
Anatomy and Variants
Four semantic types:
| Type | Icon | Color (Light) | When |
|---|---|---|---|
| Success | ✓ | green-600 | Action completed successfully |
| Error | ✗ | red-600 | Action failed |
| Warning | ⚠ | amber-600 | Completed with caveats |
| Info | ℹ | blue-600 | Information without assessment |
Component structure:
- Icon on left (20×20px)
- Message text (14px, max 2 lines)
- Optional: action button (text, "Undo", "Learn more")
- Close button × (optional, depends on pattern)
- Progress bar below (shows remaining time, optional)
Positioning
Standard positions: top-right, top-center, bottom-right, bottom-center. Choice depends on platform:
- Desktop:
top-right— most familiar, doesn't block main action - Mobile:
bottom-center— closer to thumb, doesn't block header
Position is chosen once for entire application and doesn't change. Mixing positions disorientation users.
Stacking Multiple Toasts
When several notifications appear simultaneously, stacking logic is important:
- New ones appear on top (or bottom, depends on position)
- Maximum 3–4 visible simultaneously, rest queued
- Common queue, no duplication of identical messages
Libraries react-hot-toast and sonner (by Emile Kowalski) implement stacking with collapse: several toasts collapse into a stack with visible count. This is better than infinite column of notifications.
Timing
- Auto-disappear: 4–5 seconds for short, 6–8 seconds for toast with action button
- Error toast: 8–10 seconds or without auto-disappear (user closes manually)
- Appearance animation: slide + fade, 200–250ms
- Disappearance animation: fade, 150ms
Timeline
Design of toast/snackbar system (4 types × all states, variants with button, stacking, mobile) — 1–3 days: components in Figma, animation specifications, usage rules for team.