Alert dialog^shadcn

Confirms an action that can't be undone.

Overlays

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

Confirm something that can't be undone. The action button says what it does.

To confirm an action that can't be undone, or loses work: delete, discard changes, revoke access.

The title is a question about the action: Delete "Into Games"?
The description says what will be lost and that it can't be undone.
The confirm button repeats the action (Delete project); the cancel button says what keeping looks like (Keep project). Never Yes and No.
Use variant="destructive" on the action only when it destroys something.

An alert dialog doesn't close when someone clicks outside it – they must choose.

The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.

Token	CSS variable	Value now
color.surface.defaultT-3: surface.overlay to come	--popover	…
color.text.default	--popover-foreground	…
color.border.subtle	--border	…
shadow.lg	--shadow-lg	…

Terminal

npx shadcn add alert-dialog

Import

import { AlertDialog } from "@/components/ui/alert-dialog"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.