The problem of a silent interface
A user clicks “Save” and the interface stays silent — they are waiting for confirmation. If there is none, they save again, create duplicates, waste time. A toast notification solves the task in 200 milliseconds.
We have been designing notification systems for more than five years — during this time we have developed components for dozens of projects: from admin panels to high-load SaaS.
Our experience guarantees that notifications are not only beautiful but also accessible (WCAG 2.1) and do not harm Core Web Vitals.
Toast and snackbar are temporary notifications that appear over the interface and disappear automatically. The difference lies in their origin: snackbar is a term from Material Design, toast is from mobile development (Android).
On the web, these terms are often interchangeable, but we distinguish them: toast without buttons, snackbar with an action button.
| Characteristic | Toast | Snackbar |
|---|---|---|
| Origin | Android Toast | Material Design |
| Action button | No | Yes (optional) |
| Typical usage | Confirmation of result | Reversible action (e.g., “Undo”) |
| Display time | 4-5 seconds | 6-8 seconds |
When to use toast
Toast is a confirmation, not a warning. It reports the result of an action the user has already performed. Appropriate:
- “File saved” after Ctrl+S
- “Link copied” after clicking copy
- “User deleted” after confirming deletion
- “Changes applied” after saving the form
Not appropriate:
- Critical errors requiring attention (use a modal or inline error)
- Warnings before an action (use a confirmation dialog)
- Long messages with multiple actions
How to choose a position for toast
Standard positions: top-right, top-center, bottom-right, bottom-center. The choice depends on the platform:
- Desktop: top-right — most familiar, does not overlap the main action
- Mobile: bottom-center — closer to the thumb, does not overlap the header
The position is chosen once for the entire application and does not change. Mixing positions is disorienting. On desktop, we check on real layouts that the toast will not overlap critical elements. This reduces the number of support requests and saves the project budget.
Anatomy and variants
Four semantic types:
| Type | Icon | Color (Light) | When |
|---|---|---|---|
| Success | ✓ | green-600 | Action completed successfully |
| Error | ✗ | red-600 | Action not completed |
| Warning | ⚠ | amber-600 | Completed with caveats |
| Info | ℹ | blue-600 | Information without judgment |
Component structure:
- Icon on the left (20×20px)
- Message text (14px, max 2 lines)
- Optional: action button (text, “Undo”, “Learn more”)
- Close button × (optional, depends on the pattern)
- Progress bar at the bottom (shows remaining time, optional)
How do timings affect perception?
- Auto-dismiss: 4–5 seconds for short ones, 6–8 seconds for toast with an action button
- Error toast: 8–10 seconds or without auto-dismiss (user closes manually)
- Appearance animation: slide + fade, 200–250ms
- Disappearance animation: fade, 150ms
The timer resets on hover — this is the Material Design Snackbar standard. Incorrect timings cause users to not have time to read the message or complain about intrusiveness.
We choose timings individually for the scenario — this reduces the bounce rate by 15–20% according to our measurements.
How to stack multiple notifications?
When multiple notifications appear simultaneously, stacking logic matters:
- New ones appear on top (or bottom, depending on position)
- Maximum 3–4 visible at once, the rest are queued
- Shared queue, no duplication of identical messages
More about collapse
The sonner library is better than react-hot-toast in terms of built-in collapse support: multiple toasts collapse into a stack with a visible count. It is compact and does not distract.How we design a notification system: 5 steps
- Scenario analysis — we collect all places in the interface where notifications are needed and their types.
- Design — we draw mockups in Figma for all four types, agree on position and timings.
- Implementation — we write code in React/Vue/Angular with TypeScript, support optional buttons and collapse.
- Testing — we check on mobile and desktop resolutions, accessibility, Core Web Vitals.
- Documentation — we hand over Figma components, animation specifications, usage rules.
What is included in our work on creating a notification system
We deliver:
- Figma components of all 4 types (success, error, warning, info) in several variants (with a button, with a progress bar)
- Animation specifications (duration, easing, delays)
- Code in React/Vue/Angular with TypeScript support
- Usage documentation and rules for choosing a type
- Testing on mobile and desktop resolutions
Contact us — we will send examples from our projects. We will evaluate your task and offer a turnkey solution. All components are tested for accessibility (WCAG 2.1) and Core Web Vitals. Book a consultation — we will discuss your case.
Approximate timelines
Design of a toast/snackbar system (4 types × all states, variants with a button, stacking, mobile) — from 1 to 3 days. Cost is calculated individually after the audit. Get a consultation — write to us!
