Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Destructive

Simple Delete Confirmation Alert Dialog for React

A simple delete confirmation with a destructive Delete action.

Framework
UI library

One accidental click shouldn't erase someone's data. This React alert dialog uses the destructive style on both the Delete trigger and the Delete action, with a description that says the deletion can't be undone. It's shadcn.io's Alert Dialog on Base UI.

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

Why the destructive color?

It's widely read as danger and makes people pause. Use variant="destructive" only for irreversible actions so the signal keeps its meaning.

Should reversible actions use it too?

No. For archive, hide or disable, use a normal confirmation with the default or outline buttons.

Does the trigger need to be destructive too?

It tells people the feature is dangerous before the dialog opens. For lower-stakes deletions an outline trigger with a destructive action works.

How should I word a delete confirmation?

Be specific and plain: This action cannot be undone, and name what is deleted. Don't say remove or archive if you mean delete.

Is it accessible?

Yes. The dialog is an alertdialog labelled by its title and description, and the word Delete on the button carries the meaning without the color.

Does Delete close the dialog?

Yes; run the deletion in its click handler. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

All 39 alert dialog examples