Key insights
- Position deliberately: bottom-right on desktop, top edge on mobile. The screen center is off-limits — it covers the content users are actively working on and blocks clicks.
- Match dismiss timing to severity: routine info auto-dismisses in ~4s, warnings hold ~7s, and critical errors stay until the user acknowledges them.
- Cap the stack at 3 visible toasts — newest enters at the bottom, older ones float up and out, and the rest queue. Spring motion keeps the shuffle readable.
- Always give a way out: a close button on desktop, swipe-to-dismiss on mobile, and a timer that pauses on hover so people can finish reading.
- Color-code by type (info, success, warning, error) but never rely on color alone — pair each with an icon and accent border, since ~6% of users can't tell the colors apart.
Do / Don't
- Do: Anchor toasts bottom-right on desktop and to the top edge on mobile
- Do: Pause the auto-dismiss countdown while the user hovers so they have time to read
- Do: Reinforce each type's color with a matching icon and left accent border
- Don't: Place toasts in the screen center, where they block the content users are working on
- Don't: Auto-dismiss critical errors — hold them until the user acknowledges
- Don't: Show more than three toasts at once; queue the rest instead of piling them up
