shadcn.io is not affiliated with official shadcn/ui
Sonner examples · Content
Toast with Multi-line Content Sonner for React
A success toast whose two-sentence description wraps over several lines.
A description can be longer than one line. This success toast passes two sentences as description, and the text wraps inside the toast's width. Keep it to what people need to read before the toast closes.
Preview
Installation
FAQ
What does this success toast pass?
toast.success is called with "Profile updated successfully" and a description. The description is one string: the profile was updated, and the changes are live and visible to other users.
How does that description become more than one line?
The string wraps inside the toast width. It still sits in the description slot under the title.
Which icon shows?
Toaster's success icon, a CircleCheckIcon at size-4, because the call is toast.success and it does not pass icon.
Does this call keep the toast up longer?
No. It omits duration, so the toast uses duration on Toaster, or 4 seconds when that is omitted. The long description leaves the timer alone.
Related
- Toast with Description SonnerA toast with a title and a second line of
- Toast with Custom Duration SonnerA toast that stays on screen for 10
- Toast with Rich HTML Content SonnerA toast whose message is a layout of its
- Success with Title AlertA success alert with only a title, for a
- Default Toast SonnerA button that shows a plain toast with
- Toast with Custom Icon SonnerA toast with its own check icon in place