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.