Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Toast with Description
Toast notification with title and description providing additional context beyond single message line
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
A toast title alone often isn't enough—add context with descriptions. This React toast uses Sonner's description option to show a secondary message below the main title. Built with shadcn/ui Button triggering toast function with description property, the two-line format provides event title plus supporting details—perfect for calendar reminders, event confirmations, status updates with timestamps, completed actions with next steps, or any notification where users need both what happened and relevant details in a single dismissible message.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Toast with Custom Icon
Toast with icon indicator for visual context
Toast with Multi-line Content
Toast with longer description text wrapping
Standard Toast
Basic single-line toast notification
Toast with Actions
Toast with action buttons
Info Alert
Alert component for persistent information
Standard Dialog
Modal dialog for detailed interactions
Questions you might have
React Slider - Vertical with Indicators
A vertical stepped slider with discrete text labels showing qualitative levels from Min to Max instead of numeric values
React Sonner - Toast with Custom Icon
Toast notification with custom Lucide React icon replacing default icon for semantic visual reinforcement