Skip to content

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

Free

Toast with Rich HTML Content Sonner for React

A Show Toast button for a chat notice: initials JD, John Doe, a New badge, a mockups message, and 2 minutes ago.

Show Toast is an outline button. The notice is a chat row: initials JD, the name John Doe, a New badge, a message about design mockups, and 2 minutes ago.

Use a custom layout when a title and a description cannot hold it. The toast still closes on its own. For a row that stays on the page, build it with Avatar. In React, Base UI does not lay out this notice.

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 gets passed to toast?

The first argument is a div, and that element is the title of a plain toast. This call passes no description, action, or icon.

What is inside that element?

A row with flex and gap-3: the avatar, then a column with the name and badge, the message, and a muted 2 minutes ago.

Does this use Avatar or Badge?

Yes. The circle is an Avatar with size="lg" and an AvatarFallback reading JD, and New is a Badge with pill. The name, message and time are a strong, a p and a span.

Is this toast.custom?

No. toast.custom takes a function of the toast id. This demo calls toast with the element directly, so the element is the title.

What does a screen reader get?

The text inside the element: JD, John Doe, New, the message and 2 minutes ago. Set aria-label on the wrapper, such as New message from John Doe, if that reads poorly.

Do I still mount Toaster?

Yes. The demo renders its own Toaster beside the button; in an app, render one near the root. The element you pass is the message.

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