Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Here's the thing—sometimes notifications need a real answer, not just dismissal. This React toast with action and cancel buttons forces a choice. Built with Sonner and shadcn/ui, combining action and cancel props creates inline decision dialogs—perfect for destructive confirmations, important choices, file operations, permission requests, or any notification where proceeding and canceling are equally valid options and you need users to explicitly pick one.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Toast with Action Button
Toast with single action button
Toast with Cancel Button
Toast with cancel button only
Non-Dismissible Toast
Toast requiring interaction to close
Confirmation Dialog
Modal dialog for important confirmations
Alert Dialog
Blocking alert for critical decisions
Error Toast
Error notification toast
Questions you might have
React Sonner - Toast with Cancel Button
A Sonner toast notification with a cancel button for confirmations and dismissible warnings that need explicit user acknowledgment
React Sonner - Non-Dismissible Toast
A Sonner toast that cannot be dismissed by clicking the X button, requiring users to wait for auto-dismiss or interact with action buttons