Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Warning Toast
A Sonner warning toast notification with amber alert icon for cautioning users about potential issues or important notices
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes things are not quite errors yet—just warnings that need attention. This React warning toast provides caution without panic. Built with Sonner and shadcn/ui, toast.warning shows amber styling with alert icon—perfect for session expiration warnings, unsaved changes, approaching limits, deprecation notices, risky actions, quota warnings, or any situation where users should be aware of potential problems but the system is still functioning and action can prevent failure.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Toast
Neutral toast without semantic styling
Error Toast
Error notification with red styling
Info Toast
Info notification with blue styling
Toast with Cancel Button
Toast with cancel acknowledgment
Alert
Alert component
Non-Dismissible Toast
Non-dismissible toast