Toast Notification
Choose toast when feedback should be seen but not answered.
Timing
Enter in 180-300ms, stay for 3-5s, and exit in 150-250ms.
Easing
Use ease-out on entry and ease-in on exit; keep vertical travel short.
Risk
Live Demo
What It Is
A small, non-obtrusive popup that slides in (usually from the bottom or top right) to provide brief feedback about an operation, then disappears.
Decision Guidance
Choose toast when feedback should be seen but not answered.
Best For
Non-blocking success, copy, save, or lightweight error feedback that should not interrupt the current task.
Avoid When
Avoid for critical decisions, destructive confirmations, or messages that require detailed reading.
Timing
Enter in 180-300ms, stay for 3-5s, and exit in 150-250ms.
Easing
Use ease-out on entry and ease-in on exit; keep vertical travel short.
Risk Tags
✓When to Use
- Success confirmations (e.g., "Settings saved")
- Non-critical errors
- Copy to clipboard success
✕When NOT to Use
- Critical errors requiring user action (use a modal/dialog instead)
- Lengthy text
Configuration Tips
- 01Auto-dismiss after 3-5 seconds
- 02Allow users to dismiss it manually
- 03Animate both the entrance (slide in) and exit (fade out)
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add a toast notification that slides in from the bottom right when I click save.
Code Example (Tailwind CSS)
export function ToastNotificationDemo() {}