Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sonner examples · Interactive

Toast with Action Button Sonner for React

A toast with an Undo action button that confirms with a second toast.

Framework
UI library

An action button lets people react without leaving the toast, the classic case being Undo. This toast passes action with a label and an onClick; clicking Undo closes it and shows a success 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 Undo button set?

The toast title is "Event has been created". action is { label: "Undo", onClick: () => toast.success("Action clicked") }. The label is the button text.

What happens when Undo is clicked?

onClick runs, then the toast closes. This handler does not call preventDefault, so the close still happens, and a success toast shows "Action clicked".

How do I add a second button?

Pass cancel with its own label and onClick. This demo passes action only, so there is one button.

Which other options does this call pass?

None. There is no description, duration, icon, or position. The notice is the title plus the Undo action.

Where does the word Undo come from?

The label on action. Change that string to change the button. The follow-up toast is a separate toast.success inside onClick.

Does the demo render the toaster?

Yes. The demo renders its own Toaster beside the button, and both the first toast and the success toast show in it. In an app, render one Toaster near the root.

All 24 sonner examples