Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Toast with Action Button
A Sonner toast notification with an action button that lets users perform or undo operations directly from the toast
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Ever delete something and immediately want to undo it—that tiny panic moment? This React toast with action button gives users that safety net. Built with Sonner and shadcn/ui, the action prop adds an inline button—perfect for undo actions, confirmations, quick retries, email notifications with reply buttons, or any notification where users need one-click follow-up without dismissing to find the action elsewhere.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Toast with Cancel Button
Toast with cancel option for user confirmation
Toast with Action and Cancel
Toast with both action and cancel buttons
Basic Toast
Simple toast notification without actions
Success Toast
Success notification toast
Confirmation Dialog
Modal dialog for important confirmations
Alert
Alert component for important messages
Questions you might have
React Sonner - Toast with Rich HTML Content
Toast with fully custom React JSX content including avatar badge timestamp for complex notification layouts
React Sonner - Toast with Cancel Button
A Sonner toast notification with a cancel button for confirmations and dismissible warnings that need explicit user acknowledgment