Interactive demoInteractive UIIntro
Toast notifications
Non-blocking feedback for actions that succeed, fail, or take a while to resolve.
Built withSonnerReact
Before you try it
What it needs
Nothing to configure. It runs the same everywhere.
Mode right now
ReadyThe provider is configured here; nobody has watched the real path succeed on this deployment yet.
A safe failure to try
Fire the promise-driven toast and let it fail: the pending toast becomes the failure in place, not a second toast.
The four shapes
Tone carries meaning here, so it is paired with an icon and wording rather than color alone — color on its own is invisible to a lot of people.
Promise-driven
One toast tracks a pending operation from start to finish. The loading state cannot get stranded, because the same promise resolves it.
Undo instead of “are you sure?”
PatternFor reversible actions, an undo window beats a confirmation dialog: the common case (the user meant it) costs zero clicks, and the rare case is still recoverable.
- Q3 revenue export
- Customer segments
- Churn model
What this demonstrates
- Feedback that does not steal focus or block the page
- Promise-driven toasts that swap pending to settled automatically
- Undo affordances instead of confirmation dialogs for reversible actions
- Announcing changes to assistive technology via a live region
Where the code lives
src/experiments/toasts/demo.tsxRegistered in src/experiments/registry.ts and loaded on demand by loader.tsx.
Also in Interactive UI