Skip to content

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

Free

Toast with Cancel Button Sonner for React

A Show Toast button that asks if you want to continue, with Cancel, which closes it and shows Action cancelled.

Show Toast is an outline button. The notice asks if you want to continue, and it has Cancel. Cancel closes it and shows an info toast, Action cancelled. A swipe does not run Cancel.

Use it when no is the only extra choice. A real confirm, with both answers required, is an Alert Dialog. In React, Base UI does not treat a swipe as that button.

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 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.

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