Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Delete Confirmation Dialog for Vue

A delete account dialog that keeps Delete Account off until the reader types delete my account exactly.

UI library: Ark UI

A destructive Delete Account button opens a warning that the account and its data will be removed. The field asks for the phrase delete my account. Delete Account stays off until the text matches. Cancel is beside it.

Use it when a delete cannot be undone and a plain yes is too easy. A simple confirm belongs in an Alert Dialog. In Vue, Ark UI does not compare the phrase.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger :asChild="true">
    <Button variant="destructive">Delete Account</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Delete Account</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
    <Field>
      <FieldLabel>
        Type <span class="font-mono font-semibold">{{ requiredText }}</span>{{ " " }}to confirm
      </FieldLabel>
      <Input
        autoComplete="off"
        @input="handleChange"
        :placeholder="requiredText"
        type="text"
        :value="confirmText"
      />
    </Field>
    <DialogFooter>
      <DialogClose :asChild="true">
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button :disabled="confirmText !== requiredText" variant="destructive">
        Delete Account
      </Button>
    </DialogFooter>
<!-- The rest of the file is under Installation. -->

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: Set closeOnInteractOutside to false on Dialog.

API Reference

Dialog

Sets asChild. The rest is on the Dialog page.

Button

Sets variant="destructive", variant="outline" and disabled="confirmText !== requiredText". The rest is on the Button page.

Field

No extra props in this demo. The rest is on the Field page.

Input

Sets autoComplete="off", input="handleChange", placeholder="requiredText", type="text" and value="confirmText". The rest is on the Input page.

All 17 dialog examples