Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sonner examples · Interactive

Toast with Cancel Button Sonner for React

A toast with a Cancel button that closes it and shows an info toast.

Framework
UI library

A cancel button gives a toast a clear way to say no. This toast passes cancel with a label and an onClick; clicking Cancel closes it and shows an info toast.

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

How is the Cancel button set?

The title is "Are you sure you want to continue?". cancel is { label: "Cancel", onClick: () => toast.info("Action cancelled") }. The label is the button text.

What happens when Cancel is clicked?

onClick runs and the toast closes. dismissible is not set, so the button is active. An info toast then shows "Action cancelled".

How do I add a confirm button next to it?

Pass action with a label and an onClick. This file passes cancel only, so there is one button.

Does a swipe do the same thing as Cancel?

A swipe closes the toast and does not run onClick. Cancel runs toast.info and then closes. This call does not pass dismissible.

Which other options does this call pass?

None. There is no description, duration, or action. The notice is the question plus the Cancel button.

Do I need Toaster for the follow-up too?

Yes, the same one. The demo renders its own Toaster beside the button, and the info toast from onClick shows in it. In an app, render one Toaster near the root.

All 24 sonner examples