Alert Dialog

uistable

Alert Dialog — extracted 1:1 from WEM-App.

npx shadcn add @krawma/alert-dialog

npm: radix-ui@^1.6.1 · registry: @krawma/button, @krawma/utils

Preview

States

openclosed

Keyboard

EscapeTab

Depends on

buttonutils

Purpose

A modal that interrupts the user to confirm a consequential action (delete, discard, sign out). Unlike dialog, it is for a yes/no decision — not for forms or content.

Anatomy

AlertDialog › AlertDialogTrigger › AlertDialogContent (AlertDialogHeader [AlertDialogTitle, AlertDialogDescription], AlertDialogFooter [AlertDialogCancel, AlertDialogAction]).

Style

No variants. Style the confirm as destructive for irreversible actions (the AlertDialogAction accepts button styling).

Behavior & functionality

Controlled or uncontrolled. Traps focus; does not close on overlay click (deliberate — a decision is required). Closes via Cancel/Action or Escape.

Accessibility

Role alertdialog; AlertDialogTitle is required as the name, AlertDialogDescription describes the consequence. Focus starts on a safe action and is trapped (Tab cycles); Escape cancels.

Do / Don't

✅ Reserve for irreversible/consequential confirmations; make the action label specific ("Delete project", not "OK").
❌ Don't put forms or long content in it — use dialog.