shadcn.io is not affiliated with official shadcn/ui
Sonner examples · Interactive
Toast with Action and Cancel Sonner for React
A toast with a Delete action and a Cancel button, each answered by a toast of its own.
A toast can ask a quick yes or no. This one passes action (Delete) and cancel (Cancel), and each button's onClick shows a follow-up toast. It still closes on its own, so use an alert dialog when the answer is required.
Preview
Installation
FAQ
What do the two buttons say?
The title is "File will be deleted permanently". action.label is Delete and its onClick calls toast.success("File deleted"). cancel.label is Cancel and its onClick calls toast.info("Deletion cancelled").
What happens on Delete or Cancel?
Each onClick runs, then this toast closes. Neither handler calls preventDefault. Delete is followed by the success toast, Cancel by the info toast.
Which button is rendered first?
cancel is rendered before action, so Cancel comes first and Delete after it. Both are buttons in the toast. This file sets label and onClick on each.
Does this toast stay open until I choose?
No. This call omits dismissible and duration, so a swipe can close it and the normal timer still runs. Choosing Delete or Cancel closes it too.
When should this be an alert dialog?
Use an Alert Dialog when the question must stay open until the person picks. This file is a toast with action and cancel, and it can still close on its own.
Related
- Toast with Action Button SonnerA toast with an Undo action button that
- Toast with Cancel Button SonnerA toast with a Cancel button that closes
- Non-Dismissible Toast SonnerA toast that can't be swiped away and
- Toast with Custom Duration SonnerA toast that stays on screen for 10
- Toast with Custom Icon SonnerA toast with its own check icon in place
- Toast with Description SonnerA toast with a title and a second line of