Sonner

Use toasts for brief, non-critical feedback: save confirmations, undo options, background task completions, or error notifications that don't require immediate action. Don't use for critical errors or information requiring user acknowledgment—use Dialogs instead.

4-6 seconds for informational messages, longer for messages with actions (10+ seconds), indefinite for errors requiring attention. Users need time to read and optionally act, but toasts shouldn't linger and clutter the interface unnecessarily.

Yes! Actions like Undo, View, or Retry turn toasts into powerful feedback tools. Keep actions simple—complex interactions belong in Dialogs. Toasts with actions should stay visible longer so users have time to notice and click.

Top-right or bottom-center are common. Top-right is less intrusive (doesn't cover content), bottom-center is more noticeable (good for important feedback). Be consistent—switching positions confuses users about where to look.

Stack 3-5 maximum. More toasts indicate system overload or misuse. If showing many notifications, use a notification center instead of bombarding users with toasts. Quality and relevance matter more than quantity.

Yes, this Figma Sonner component matches the shadcn/ui implementation exactly, ensuring your toast notifications work consistently from design to production with proper timing and animations.