Pattern
Confirmation modal
Destructive actions always pass through a guard like this β consequence spelled out, safe option focused.
Example trigger
The danger button never acts directly β it opens the modal. Confirm fires a toast; cancel or ESC closes silently.
Anatomy
- β οΈ Icon sets the tone β red for destructive, lime for apply/approve.
- π£ Title states the action as a question: "Revoke this token?"
- π Body names the exact object and the irreversible consequence.
- π± Cancel on the left, action on the right; ESC and backdrop-click dismiss.
- π£ Confirmation ends in a toast so the outcome is visible anywhere.