Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Destructive

Delete Confirmation with Icon Alert Dialog for React

A delete confirmation with a trash icon beside the title and a destructive action.

Framework
UI library

Red text alone doesn't always register as danger; a trash icon does. This React alert dialog pairs a destructive-colored trash icon with the title and a destructive Delete Project action, so the intent is clear before anyone reads the words. 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

Which icon fits a destructive action?

A trash can for deleting, a warning triangle for risky operations, a user-minus or X for removing people or access. Avoid a bare X for deletion, since it also means close.

Should the icon match the button color?

Yes. The icon uses text-destructive and the action variant="destructive", so the same theme color marks everything dangerous in the dialog.

What size works beside the title?

size-5 balances with the title text. Larger icons crowd the header; smaller ones read as decoration.

Inline or centered above the title?

Inline, as here, for routine deletions. Center a larger icon for the heaviest ones, like closing an account, as Destructive with Checkbox Confirmation does.

Is the warning accessible without the icon?

Yes. The icon is aria-hidden; Delete Project in the title and on the button carries the meaning, so color and icon are never the only signal.

Does Delete Project 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