Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sonner examples · Interactive

Non-Dismissible Toast Sonner for React

A toast that can't be swiped away and closes on its own after 5 seconds.

Framework
UI library

Some notices should stay up for their whole time. This toast passes dismissible: false, so a swipe can't close it, and duration: 5000, so it still closes itself after 5 seconds. Use it sparingly: a message people must act on is a dialog.

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

FAQ

What does this toast pass?

toast is called with "This toast cannot be dismissed", dismissible: false, and duration: 5000. The 5000 is milliseconds, so the notice lasts 5 seconds.

Can I swipe this toast away?

No. dismissible: false makes the pointer handlers return before a swipe can close it. The duration still removes the toast after 5 seconds.

Does this hide the close button?

This call does not set closeButton. That option is separate, on the toast or on Toaster, and this demo sets neither. If a close button is shown, dismissible: false makes its click do nothing.

Is this the same as a loading toast?

No. toast.loading skips the timer because its type is loading. This demo is a plain toast with a finite duration, so it still closes itself.

What about an action button on a non-dismissible toast?

This file does not pass action or cancel. A cancel click is ignored when dismissible is false. An action click still runs, and it closes the toast unless the handler calls preventDefault.

Do I set dismissible on the toaster?

No. This demo passes dismissible and duration on the one toast call, so they apply to this toast only. The demo renders its own Toaster; in an app, render one near the root.

All 24 sonner examples