Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Info Toast
A Sonner info toast notification with blue info icon for sharing helpful information and neutral updates with users
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Not everything is success, error, or warning—sometimes you just need to share helpful info. This React info toast provides informational feedback. Built with Sonner and shadcn/ui, toast.info shows blue styling with info icon—perfect for update announcements, feature tips, status changes, helpful reminders, process notifications, background task completions, or any message that informs users without indicating success, failure, or warning and simply provides useful context or knowledge.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Toast
Neutral toast without semantic styling
Success Toast
Success notification with green styling
Warning Toast
Warning notification with amber styling
Toast with Action Button
Toast with action button
Alert
Alert component
Loading Toast
Loading toast
Questions you might have
React Sonner - Warning Toast
A Sonner warning toast notification with amber alert icon for cautioning users about potential issues or important notices
React Spinner in Item
A React download progress item with spinner icon progress bar and cancel button showing file transfer status built with shadcn/ui Item components