Skip to content

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

Free

Success Toast Sonner for React

A Show Success button that opens Your changes have been saved with the check icon, and with no detail line and no Undo.

Show Success is an outline button. The toast says Your changes have been saved and shows the check icon. There is no detail line and no Undo.

Use it right after a save, a send, or an upload, and name what worked. If the confirmation should remain, use an Alert. In React, Base UI themes the check and does not decide the sentence.

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 Success
  </Button>
</>

FAQ

How does this demo mark the toast as a success?

The button calls toast.success with "Your changes have been saved". That sets the type to success. Toaster then uses its success icon, a CircleCheckIcon with className="size-4" and aria-hidden.

Which options does this call pass?

Only the message. This file does not pass description, duration, action, or icon. The check icon comes from the icons map on Toaster.

How do I put a detail line under the saved message?

Pass description as the second argument to toast.success. It renders under the title. This demo leaves that argument off.

How do I add an Undo button?

Pass action with a label and an onClick. The button sits in the toast, runs onClick, and then closes the toast. This demo does not pass action.

How do I show the same sentence with an empty icon slot?

Call toast with the string. A plain call has no type, so Toaster does not add the success icon. This file uses toast.success for the completed save.

Does the demo render the toaster?

Yes. The demo renders its own Toaster beside the button, so it works on its own. In an app, render one Toaster near the root. It sets theme="system", so toasts follow light or dark mode.

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