Toast

Toast is the base notification system, Sonner is an opinionated Toast implementation with better UX. Both are for brief, dismissible feedback. Alerts are for prominent, persistent messages within page content. Use Toast/Sonner for temporary feedback, Alert for important in-content notices.

Auto-dismiss informational messages after 4-6 seconds, keep error toasts longer or persistent (users need time to read and act). Success confirmations can be shorter (3-4 seconds). Match duration to message importance and length.

When appropriate, yes! "Undo" actions are powerful ("Deleted comment. Undo"), "View" for navigation ("New message. View"), or "Retry" for failed operations. Actions make Toasts more useful than passive notifications.

Common positions: top-right (unobtrusive), bottom-right (doesn't cover content), bottom-center (mobile-friendly, more noticeable). Be consistent—changing positions confuses users about where to look for notifications.

Limit to 3-5 visible toasts maximum. More indicates system issues or notification overuse. Consider a notification center for high-frequency notifications rather than overwhelming users with endless toasts.

Yes, this Figma Toast component matches the shadcn/ui implementation, ensuring your notification toasts work consistently from design to production with proper timing, stacking, and accessibility.