Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cognite.com/llms.txt

Use this file to discover all available pages before exploring further.

Sonner

In progress | Storybook link coming soon

When 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.
PriorityTypeDisplay timeImplication
1Critical8 secondsThe most important and urgent feedback.
2Warning6 secondsA warning that requires attention but is not critical.
3Success4 secondsA successful action or result.
4Neutral4 secondsA neutral message or information.
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.

Often used with

  • Optional action control (e.g. Undo) styled as a Button; status icon; does not include full Alert copy blocks.
Last modified on May 11, 2026