Toast Notification Design
Toasts confirm that something happened without interrupting what the user is doing. They should be brief, consistently placed and never carry information the user must act on.
By Mohamed Farhan · Updated Oct 19, 2026
Inside the example
The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px) and spacing gap-2 (8px), gap-3 (12px), px-4 (16px), py-3 (12px), constrained by max-w-sm and w-2. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.
Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.
Anatomy
- 1.Status indicator
- Shows success, info, warning or error.
- 2.Message
- One short sentence describing what happened.
- 3.Action
- Optional single action like 'Undo' or 'View'.
- 4.Dismiss
- A close button for persistent toasts.
Common variations
- Simple toast, a short message that disappears on its own.
- Toast with action, such as Undo or View, which stays longer.
- Persistent toast, for background tasks like uploads, with progress and a close button.
- Stacked toasts, where several messages queue in one corner.
States to design
- Entering: a short, subtle motion so the toast is noticed.
- Visible: timer running, paused on hover or focus.
- With action pressed: confirmation such as 'Restored'.
- Dismissing: quick exit animation, respecting reduced motion settings.
A walkthrough
A designer is cleaning up a shared folder and deletes three files. Instead of a confirmation dialog, a dark toast appears in the bottom right: '3 files moved to trash. Undo'. She realizes one of them was still needed and clicks Undo, and a second short toast confirms the files are restored.
Later she starts a large export. A persistent toast shows progress and stays while she keeps working. When the export finishes, the toast changes to 'Report exported' with a View link. Throughout, the toasts never cover the primary buttons she is using, and when she hovers over a toast its timer pauses so she has time to read it.
How different products use it
Productivity apps use toasts to confirm actions like 'Moved to Archive' with Undo, which makes destructive actions safer without confirmation dialogs.
Ecommerce sites confirm 'Added to cart' with a View cart action, often combined with a cart drawer.
Developer tools and dashboards use persistent toasts for background jobs like deployments and exports, with progress and links to logs.
Visual design guidelines
Toasts are typically 320 to 420px wide on desktop, with 12 to 16px padding, 14px text and a single action aligned to the right. Use a strong surface contrast (a dark toast on light UI or vice versa) so it stands out without needing a heavy shadow. Stack multiple toasts with 8px gaps and limit the stack to three, collapsing older ones.
Best practices
Do
- Keep messages under about ten words.
- Offer 'Undo' for destructive actions.
- Stack toasts in one consistent corner.
- Pause auto-dismiss while hovered or focused.
Don't
- Do not use toasts for errors that need fixing; show those inline.
- Do not auto-dismiss toasts that contain an action too quickly.
- Do not show several toasts for one action.
On mobile
On mobile, place toasts at the bottom center above navigation bars, keep them one line where possible and make actions large enough to tap. Allow swipe to dismiss, but do not rely on it as the only way to close persistent toasts.
Common mistakes
- Using toasts for errors that require action, which users may miss.
- Disappearing too fast, especially with an action.
- Covering important controls, such as the primary button or navigation.
- Showing too many at once, which overwhelms users.
Edge cases to plan for
- Many rapid actions should update one toast rather than creating dozens.
- Toasts during page navigation should persist or reappear on the new page if relevant.
- Screen magnification users may not see corner toasts; important information must also appear in context.
- Offline actions should queue and confirm when synced.
Accessibility checklist
- Announce toasts with role="status" (or role="alert" for errors).
- Give enough time to read: at least 5 seconds, longer with actions.
- Never rely on color alone to show the status.
Implementation notes
Render toasts in a single container with role="status" (or role="alert" for urgent messages) so screen readers announce them. Pause auto-dismiss on hover and focus, and give users enough time, especially for actionable toasts. Respect prefers-reduced-motion for entrance and exit animations.
In your design system
In a design system, toasts need a provider or manager that controls position, stacking, timing and announcements, plus a toast component with status variants and an optional action. Tokens should cover width, padding, durations and motion, and the API should make it hard to misuse toasts for errors that need attention.
How to measure whether it works
Track how often Undo actions are used, which can reveal accidental actions in your interface. Watch for repeated toasts for the same action, which may indicate users are unsure whether something worked.
Pre-launch checklist
Microcopy you can use
A step-by-step design process
- List every event that could produce a toast and decide which deserve one.
- Define variants for success, info, warning and error.
- Choose one position for desktop and one for mobile.
- Set timing rules, including pause on hover and longer times for actions.
- Design stacking and limits for multiple toasts.
- Wire up screen reader announcements with the right roles.
Usability test tasks
Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:
- Delete an item and undo it.
- Tell whether a save succeeded.
- Dismiss a toast with the keyboard.
- Follow the link in a completed export toast.
Key terms
- Snackbar: Material Design's name for a toast with an optional action.
- Live region: An area whose changes are announced by screen readers.
- Auto-dismiss: A toast that disappears after a set time.
- Undo: An action that reverses the last operation.
Writing the copy
Use past tense for completed actions: 'Saved', 'Copied', 'Invite sent'. Name the object when helpful: 'Report exported'. Keep error toasts specific with a next step: 'Couldn't connect. Retry'. Avoid exclamation marks and celebratory language for routine actions.
Prompts to generate variations
If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:
- Design a toast notification system with success, info, warning and error variants, Undo actions and stacking.
- Create a persistent upload toast with progress, cancel and a completed state.
- Design mobile toasts that sit above a bottom tab bar.
Related patterns
Toasts complement inline error messages and loading states. For important system-wide information, a banner or notification design pattern is more appropriate.
Generate this pattern for your product
Inspo AI designs the full pattern with every state, grounded in how real products solve it, and exports React + Tailwind.
Sources and further reading
- WAI-ARIA Authoring Practices Guide · Accessible keyboard and screen reader patterns for UI components.
- WCAG 2.1: Non-text Contrast · Contrast requirements for buttons, borders and icons.
- WCAG 2.1: Use of Color · Why color should never be the only way information is shown.
- Nielsen Norman Group articles · Usability research on interface patterns.
More UI patterns
Questions people ask
How long should a toast stay on screen?
Around 4 to 6 seconds for simple messages, longer if there is an action, and paused while the user hovers or focuses it.
Where should toast notifications appear?
Bottom right or top right on desktop and bottom center on mobile are common. Pick one position and keep it consistent.
Toast vs snackbar: what is the difference?
They are largely the same pattern. 'Snackbar' is Material Design's name, usually bottom-placed with an optional single action.
Should success messages be toasts?
For quick confirmations like 'Saved', yes. For important outcomes, such as a payment, show a full confirmation screen.
Where should toasts appear on desktop?
Bottom right or top right are common. Pick one location and use it everywhere.
↘ Building Inspo AI | AI-Powered Design Research & Builder Platform | Design Engineer.