Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Delete Confirmation Dialog for React

A delete account dialog whose delete button stays disabled until the reader types the confirmation phrase.

Framework
UI library

Deleting an account by accident is a disaster. This React dialog keeps Delete Account disabled until the reader types delete my account, which turns a click into a deliberate act. It's shadcn.io's Dialog on Base UI with a controlled Input in a Field.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Should the match be case-sensitive?

The demo compares exactly. Compare lowercase versions if you'd rather accept Delete My Account too; keep exact matching for names that are case-sensitive in your system.

What phrase should people type?

Something specific: delete my account, or the name of the resource. Avoid yes or confirm, which are typed without thinking.

How is the button disabled?

The input is controlled, and the button takes disabled until its value equals the phrase.

How do I make the danger clear?

Use variant="destructive" on the trigger and the button, and say exactly what will be removed in DialogDescription.

Should deletion be undoable?

If you can, yes: a soft delete with a recovery period lets you lighten the confirmation and still protect people.

How do I keep it open while deleting?

Control the dialog, show isLoading on the button during the request, and close it when the deletion succeeds. To stop an outside click from closing it meanwhile: Pass disablePointerDismissal to Dialog.

All 17 dialog examples