Toast notification design
A lightweight, non-blocking notification system that slides in from the edge of the viewport and auto-dismisses.
Anatomy
✓
Changes saved
Your profile has been updated successfully.
Variants
i
Info toast
Neutral message.
!
Error toast
Something went wrong.
Placement
Top-right (default)
Bottom-center
Top-center
Behavior
- Auto-dismiss after 4–6 seconds with a progress bar or fade-out.
- Pause timer on hover. Resume on mouse leave.
- Stack multiple toasts with a max visible count (3–5).
- Swipe or click dismiss with a subtle exit animation.