Skip to content

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

Free

Non-Dismissible Toast Sonner for React

A Show Toast button for a notice that says it cannot be dismissed, ignores a swipe, and still closes after 5 seconds.

Show Toast is an outline button. The notice says This toast cannot be dismissed. A swipe will not close it. It still goes away after 5 seconds.

Use it rarely, for a notice that should last its whole time. If people must act, ask in an Alert Dialog. In React, Base UI does not block the swipe. This call does.

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

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.

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