shadcn.io is not affiliated with official shadcn/ui
Sonner examples · Content
Toast with Description Sonner for React
A toast with a title and a second line of description.
A title alone often leaves out the detail people need. This toast passes description for a second, quieter line under the title: the event first, then its day and time.
Preview
Installation
FAQ
How is the second line set?
The call is toast("Event has been created", { description: "Monday, January 3rd at 6:00pm" }). The first string is the title. description is the line under it.
Does this toast have an icon?
No. The call is plain toast, so there is no success or error type. Pass description to toast.success the same way when you want Toaster's check icon and this second line.
Which other options does this call pass?
None. There is no action, duration, icon, or position in this file. The notice is the title plus that description.
Is the description one string?
Yes. "Monday, January 3rd at 6:00pm" is a single string. It renders in the description slot under the title, which already has a style for supporting text.
Related
- Toast with Custom Icon SonnerA toast with its own check icon in place
- Toast with Multi-line Content SonnerA success toast whose two-sentence
- Default Toast SonnerA button that shows a plain toast with
- Info with Title AlertAn info alert with only a title, for a
- Standard DialogA share dialog with a read-only link, a
- Toast with Custom Duration SonnerA toast that stays on screen for 10