← Shared UI

Confirm Dialog

shared ui · wireframes · shared component

Confirming a destructive action. Three levels by the weight of consequences.

Variant When Tone
Reversible State comes back, data intact Accent button
Irreversible Data or access is destroyed Alert + red button
Type-to-confirm The heaviest: deleting a user or an organization Typing the name unlocks the button

Reversible

confirm · reversible

Deactivate this user? 1

Sign-in for Anna Petrova will be closed and active sessions ended. The account and its history are kept — you can reactivate it at any time. 2

Cancel 3
Deactivate 4
  1. 1 Question — action verb + object, one line.
  2. 2 Consequences — what will happen; the object's name is emphasized.
  3. 3 Cancel — a ghost button, focused by default.
  4. 4 Confirm — an accent button with a guard marker; the label repeats the verb (not “OK”).

Irreversible

confirm · irreversible

Revoke this API key?

The key ach_live_••••4f2a will stop working immediately. Integrations using it will lose access.

This action is irreversible — a revoked key cannot be restored, you will need to create a new one.
Cancel
Revoke key

Delta from reversible: an irreversibility alert and a red button instead of the accent one.

Type-to-confirm

confirm · type-to-confirm

Delete this user?

The account of Anna Petrova and its links will be deleted with no way to recover. The history in the audit log is retained.

Type the name to confirm
Expected: Anna Petrova
Cancel
Delete

Delta from reversible: a name input field — the button is active only on an exact match. Used, for example, when deleting an account in Admin Panel.