Toast Notification
A brief, non-modal notification that appears temporarily to confirm an action or deliver a status update.
Plain English
A toast notification pops up briefly to say "it worked" or "something went wrong," then disappears on its own. Unlike modals, toasts do not interrupt the user — they confirm and inform without demanding a response. The classic example: saving a form shows a green "Saved successfully" toast for 4 seconds, then it fades out. Toasts should be brief, clear, and positioned where they do not cover important UI — typically the top-right or bottom-right corner.
Technical
Position: fixed in a corner (top-right or bottom-right most common). Stack multiple toasts vertically. Auto-dismiss after 3-5 seconds (adjustable for longer messages). Progress bar optional. Accessibility: role="status" (polite) for success/info, role="alert" (assertive) for errors. Should include a manual dismiss button (×). Entrance animation: slide in from the edge + fade. Exit: fade out. Max-width: 320-400px. Variants: success (green), error (red), warning (amber), info (blue/neutral).
Live Demo
Toasts: 3–5 second auto-dismiss. Success bottom-right, errors need manual dismiss.
Usage
✓ Good usage
A green bottom-right toast with ✓ icon and "Profile updated" text that auto-dismisses in 4 seconds with a manual × button.
✗ Bad usage
Stacking 6 simultaneous toasts because multiple background operations completed — queuing or combining messages is better.
Recommended values
- Position: bottom-right (common for apps), top-right (common for marketing sites)
- Auto-dismiss: 4-5 seconds for success/info, persistent for errors
- Max-width: 320-400px
- Padding: 12-16px
- Border radius: 8-12px
- Include a × dismiss button regardless of auto-dismiss
Common mistakes
- No manual dismiss — users who want to close it earlier cannot.
- Error toasts that auto-dismiss — errors should persist until acknowledged.
- Toast too wide or blocking important content.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Bottom-right toasts: 360px max-width, 14px padding, 8px radius, shadow-elevated. Variants: green (success), red (error), amber (warning). Auto-dismiss: 4s for success/info. Errors persist until dismissed. × button always present. Slide-in from right + fade, 200ms. role="status" (success/info) or role="alert" (errors).