shadcn.io is not affiliated with official shadcn/ui
Sonner examples · Content
Toast with Custom Duration Sonner for React
A toast that stays on screen for 10 seconds instead of the default 4.
Four seconds is too short for a message people need to read. This toast passes duration: 10_000 on the call, so it stays for 10 seconds while other toasts keep the default.
Preview
Installation
FAQ
How long does this toast stay?
The call passes duration: 10_000 with the message "This toast will stay for 10 seconds". The number is milliseconds, so this notice stays for 10 seconds.
What is the lifetime when I omit duration?
A toast with no duration uses duration on Toaster, or 4 seconds when Toaster omits it too. This call sets the time on this toast only.
Can the user close it before 10 seconds?
Yes. This call omits dismissible, so a swipe can still close it. The timer only sets the auto-close.
Does this duration apply to every toast?
No. duration on the call is for this notice. Set duration on Toaster when every toast should share one lifetime.
Related
- Toast with Description SonnerA toast with a title and a second line of
- Default Toast SonnerA button that shows a plain toast with
- Warning with Title AlertA warning alert with only a title, for a
- Standard DialogA share dialog with a read-only link, a
- Toast with Custom Icon SonnerA toast with its own check icon in place
- Toast with Multi-line Content SonnerA success toast whose two-sentence