UI pattern sheet

Destructive confirm modal · one pattern, three intensities

Use the same modal shape everywhere a user is about to do something destructive. The intensity (amber → rose → "type to confirm") scales with how hard the action is to undo.

Anatomy

Title · names the thing being destroyed, in the user's words
What stays · what goes · two columns, never a wall of text
Reversibility line · "you can restore for 7 days" or "this cannot be undone"
Friction · type-to-confirm only at level 3
Cancel is on the left, destructive on the right · always
Esc closes · click outside closes · enter does not confirm

When to use which

L1 · soft	Delete document · remove approved sender · cancel pending invite
L2 · hard	Leave household · cancel subscription · revoke CA share
L3 · permanent	Dissolve household · delete account · purge all data

Level 1 · soft (delete document)

One button to confirm · undoable from Trash for 30 days

Demo · underlying screen

Delete document

Delete Form_16_FY2024-25_Manifest_Infotech.pdf?

Removes the file and all data we extracted from it. We'll keep it in Trash for 30 days · restore any time.

Level 2 · hard (cancel subscription)

Two columns · explicit "this is what changes" · single confirm

Demo · underlying screen

Cancel Pro subscription

Cancel Pro at end of billing period?

You stay on Pro until 28 Feb 2027, then revert to Free.

You keep

· All your Inbox docs forever
· Past AY Tax Reviews you bought
· Your invoices and audit log

You lose at end of period

· Auto-refresh of Tax Review for new AY
· Priority CA matching
· Family combined views

Level 3 · permanent (delete account)

Type the literal word to confirm · no Esc-to-confirm path

Demo · underlying screen

Permanently delete account

Delete the account for aarav.sharma@gmail.com?

All documents, extracted data, family links, and CA shares are removed within 30 days. Tax records retained for 7 years per Income-Tax Act, then wiped. This cannot be undone after the 30-day grace window.

Type "DELETE MY ACCOUNT" to confirm

I understand the 30-day grace window and that my data will be permanently removed after.

Used by these flows