Vanilla JS Sonner Toast Library Demos
Download Back To CSSScript.Com
Try every kind of toast. Adjust its appearance, test an action, and follow each notification from start to finish.
Your toast, your way.
Set the details. Hit send.
A toast for every moment.
Pick a type to preview its appearance.
More than a message.
Click, swipe, or take an action.
Action buttons
Undo an archive, await a save, or keep a toast open after an action.
Dismissal & accessibility
Drag a swipe toast sideways. Locked toasts remain until cleared or timed out.
While things happen.
Loading states that resolve, fail, and report progress.
Promise results
Wait two seconds for a result with a title, description, and action.
Delayed appearance
A slow task shows a toast after one second. A fast task finishes before it appears.
Controlled progress
Start an upload, adjust its progress, then finish it.
Stay in control.
Update the same toast and manage its remaining time.
One toast. One identity.
Create a toast first, then change it in place or check whether it is active.
Timers & removal
Pause and resume the managed toast, or end it with an animated or immediate exit.
The whole stack
Apply timer controls to all notifications in the main stack.
No managed toast yet.
Give every toast its place.
Choose how the main stack handles a burst of notifications.
Capacity: 3 per position.
Make room for something different.
Custom content, independent stacks, and creation rules.
Custom templates & styling
Preview an HTML template, then a custom surface with the built-in decoration removed.
Independent notification stack
A named stack at the top center has its own defaults and history.
Duplicate filtering
Send the same message three times, or match notifications by their operation metadata.
Creation hooks
Transform a message before it appears, or suppress it entirely.
Independent stack ready.
See what happened.
Live snapshots, closed notifications, metadata, and lifecycle events.