Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sonner examples · Standard

Success Toast Sonner for React

A button that shows a success toast with the check icon.

Framework
UI library

A success toast confirms that an action worked. The button calls toast.success, and Toaster adds its check icon. Use it after a save, a send or an upload, and say what succeeded.

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

All 24 sonner examples