How it works
You place one Toaster component near the root of the app and call toast('Saved') from anywhere, even outside React components. It has success, error, loading and custom toasts, action buttons such as Undo, and toast.promise, which shows a loading message that turns into success or failure when a request settles. Toasts stack neatly and can be swiped away.
shadcn/ui adopted Sonner as its recommended toast component, which made it a common choice in Tailwind-based React apps. Toasts suit brief, non-critical feedback. Errors that need a decision, or anything users must not miss, belong in the page or a dialog, and toasts that matter should stay long enough to read and be announced to screen readers.
Sonner pricing
Related terms
More in Building blocks and outside APIs
Interface pieces