Clinia UI

Sonner

Brief, non-blocking notifications that confirm an action or report an error.

shadcn docs →

When to use

  • Confirm an action that just happened: Source connected.
  • Report a background result or failure that doesn't block work: Export ready.

When not to use

  • A choice the user must make: use Alert Dialog.
  • A problem that stays until it's fixed: use Alert.
  • A form error: show it on the field with Field.

Install

npx shadcn@latest add @clinia/sonner

Clinia rules

  • Toasts sit on popover with a border hairline and the site radius. Success, info, warning and error each show a Material Symbols icon beside the text, so status never relies on colour.
  • The title says what happened in a few words, in sentence case: Workspace renamed. Add a description only when there is a next step.
  • Use toast.promise for work that takes a moment: it shows a loading state, then the result.
  • Mount one Toaster at the app root. It follows next-themes; without a ThemeProvider, pass theme.

Do and don't

Source connected
Do confirm what just happened in a few words.
Imaging can't sync
Reconnect the source to resume syncing.
Don't report a problem that stays until it's fixed: the toast is gone in 4 seconds. Use Alert.

States

default
Workspace renamed
success
Source connected
Indexing starts in a few seconds.
info
A new version is available
warning
API key expires in 3 days
error
Couldn't save changes
Check your connection and try again.
loading
Exporting records…

Toggle the site theme to review both themes.

Accessibility

Built in

  • Toasts are announced by a live region and don't take focus. Anything the user must act on belongs in an Alert Dialog, not a toast.
  • The dismiss timer (4 seconds by default) pauses while the pointer is over the toasts, while they have focus, and while the browser tab is hidden.
  • Alt+T (Option+T on macOS) moves focus to the Notifications region.

Your responsibility

  • Don't make a toast the only way to undo or retry. It disappears, and screen reader users may miss it.
  • Keep the message readable in 4 seconds, or set a longer duration. A toast with an action, such as Undo, stays at least 10 seconds (duration: 10_000).

How to test

  1. Trigger a toast: a screen reader reads the message without moving focus.
  2. Hover the toast: it stays until the pointer leaves.
  3. Press Alt+T: focus moves to the toasts, and Tab reaches any button inside them.
  4. Wait without touching anything: the toast closes after about 4 seconds.

API

Every prop comes from Sonner.

Related