Shadcn.io is not affiliated with official shadcn/ui
Toast with Cancel Button
A Sonner toast notification with a cancel button for confirmations and dismissible warnings that need explicit user acknowledgment
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.
Toast with Cancel Button preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.