shadcn.io is not affiliated with official shadcn/ui
Sonner examples · Content
Toast with Rich HTML Content Sonner for React
A toast whose message is a layout of its own: an avatar, a name with a badge, a message and a time.
When a title and a description can't hold the layout, pass an element as the message. This toast shows a chat notification: an Avatar with initials, a name with a New Badge, the message and how long ago it was sent.
Preview
Installation
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.
Related
- Toast with Description SonnerA toast with a title and a second line of
- Toast with Multi-line Content SonnerA success toast whose two-sentence
- Toast with Custom Icon SonnerA toast with its own check icon in place
- Avatar StandardA round avatar with a profile picture and
- Badge with Text (Standard)A default badge with a short label for a
- Info with Title AlertAn info alert with only a title, for a