shadcn.io is not affiliated with official shadcn/ui
Sonner examples · Content
Toast with Custom Icon Sonner for React
A toast with its own check icon in place of the type icon, and a description.
The icon option puts any element in a toast's icon slot. This toast passes a Lucide CheckCircleIcon with a description, on a plain toast call. Use it when an icon should say more than the type icons do.
Preview
Installation
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.
Related
- Toast with Description SonnerA toast with a title and a second line of
- Default Toast SonnerA button that shows a plain toast with
- 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
- Badge with Text (Standard)A default badge with a short label for a
- Toast with Custom Duration SonnerA toast that stays on screen for 10