Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Toast with Cancel Button
A Sonner toast notification with a cancel button for confirmations and dismissible warnings that need explicit user acknowledgment
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes users need to explicitly say no—not just dismiss. This React toast with cancel button gives confirmations a clear opt-out. Built with Sonner and shadcn/ui, the cancel prop adds an inline dismiss button—perfect for confirmation prompts, warning acknowledgments, optional actions, timeout warnings, or any notification where passive dismissal is ambiguous and you need users to actively confirm they understand or choose to cancel.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Toast with Action Button
Toast with action for undo or confirmation
Toast with Action and Cancel
Toast with both action and cancel buttons
Non-Dismissible Toast
Toast that requires interaction to dismiss
Confirmation Dialog
Modal dialog for important confirmations
Basic Toast
Simple toast notification
Destructive Alert
Warning alert component
Questions you might have
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
React Sonner - Toast with Action and Cancel
A Sonner toast with both action and cancel buttons for confirmations requiring explicit yes/no choices directly in the notification