Sonner
v1.0.0 | View in StorybookWhen to use
- To provide timely feedback for user-triggered actions (e.g., “Item deleted.”).
- For non-critical updates that don’t require immediate attention (e.g., “2 new messages.”).
- To confirm or acknowledge system or app processes (e.g., “Downloading file…”).
- When you need a lightweight, non-disruptive notification that doesn’t block user progress.
- To display multiple messages in sequence without breaking the user flow.
When to use something else
- Urgent, blocking issues: use Dialog, Alert dialog, or Banner.
- Long or detailed content, or must-stay-visible feedback: use inline validation, Alert, or dedicated error regions—not a toast.
- Persistent system-level messaging: prefer Banner; task-scoped feedback: prefer Alert.
Dos and don’ts
- Do keep messages short and clear (1-2 lines max).
- Do use appropriate semantic status color and iconography to convey status (e.g., success = green, warning = yellow).
- Do provide an “Undo” or “Retry” action if possible.
- Don’t show vague or generic messages (e.g., “Done” or “Failed”).
- Don’t display more than one Sonner at a time.
Behavior
There is a priority-based queue and duration of display time depending on the feedback type. The counter ensures that more critical Sonners stay on the screen for a longer period of time, giving the user more chance to read and act on them. Sonners have a minimum display time of 4 seconds.
Dismissal:
Auto-dismiss: Sonners automatically disappear after their display time (see table above).
Manual dismiss (optional): You can include a close Button for user control, especially for longer or persistent messages.