Skip to content

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

Free

Toast with Custom Icon Sonner for React

A Show Toast button for Payment successful, with a check icon supplied for this toast and a line that the payment was processed.

Show Toast is an outline button. The notice says Payment successful, with a check icon passed in for this toast, and a second line that the payment has been processed.

Use your own icon when the built-in type icons are not the point. If the receipt should stay, use an Alert. In React, Base UI does not pick this icon.

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

What does this toast pass?

toast is called with "Payment successful". The second argument sets description to "Your payment has been processed" and icon to a CheckCircleIcon with className="size-4".

Why does this call use plain toast?

The call is plain toast, so the icon on screen is the icon you passed. toast.success would use Toaster's CircleCheckIcon unless that call also passes icon.

Where do the icon and description sit?

description renders under the title. The icon element renders in the icon slot beside that text. This file passes both, and nothing else.

What size is the icon?

size-4, from the className on CheckCircleIcon. That matches the icons Toaster sets for success, error, warning, info, and loading, which are also size-4.

Is this icon hidden from assistive tech?

Yes. The CheckCircleIcon sets aria-hidden="true", like the icons on Toaster. The title, Payment successful, carries the meaning.

Do I still need Toaster?

Yes. The demo renders its own Toaster beside the button; in an app, render one near the root. The custom icon is passed on the call, and Toaster is what shows the toast.

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