Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Toast with Custom Duration Sonner for React

A Show Toast button for a notice that stays 10 seconds, while other toasts keep their own time, and a swipe can still close it.

Show Toast is an outline button. The notice says it will stay for 10 seconds, and the timer is 10 seconds. A swipe can still close it. Other toasts keep their own time.

Use a longer time when people need more than a glance. A message that must stay is an Alert, not a longer toast. In React, Base UI does not change the other toasts' timers.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sonner anatomy: toaster, toast, title, description, action

Usage

<>
  <Toaster />
  <Button onClick={handleShowToast} variant="outline">
    Show Toast
  </Button>
</>

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.

Does the message set the time?

No. The sentence is only the title, and the 10 seconds come from the duration option. This call passes no description or action.

Does the demo render the toaster?

The demo renders its own Toaster beside the button, so it works on its own. In an app, render one Toaster near the root and call toast from anywhere.

API Reference

Sonner

No extra props in this demo. The rest is on the Sonner page.

Button

Sets onClick={handleShowToast} and variant="outline". The rest is on the Button page.

All 24 sonner examples