Alert Dialog

Alert Dialog interrupts the user’s workflow to communicate critical information or confirm an action that cannot be taken lightly. It presents a short, focused message and requires the user to explicitly confirm or cancel before proceeding.

Use Alert Dialog for actions such as deleting data, performing irreversible changes, or acknowledging important warnings where dismissal without a decision would be unsafe.

Installation

npx shadcn-ui@latest add alert-dialog

<Step>Install the following dependencies:</Step>

npm install @radix-ui/react-alert-dialog

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'

<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Behavior

Unlike a generic Dialog, an Alert Dialog cannot be dismissed by clicking outside the modal. The user must take an explicit action by confirming, cancelling, or pressing Escape.

This enforced decision helps prevent accidental dismissal of critical warnings or destructive actions.

Guidelines

• Keep content concise: AlertDialogDescription renders as a single paragraph and must not contain block-level elements such as lists, multiple paragraphs, or complex layouts.
• Use for critical decisions only: Reserve Alert Dialog for destructive or irreversible actions, or for warnings that require explicit acknowledgement.
• Use for dirty-form discard confirmation: A short discard-confirmation step after a dirty form dismissal attempt (backdrop, Escape, or Cancel) is a valid Alert Dialog pattern. In Studio, prefer DiscardChangesConfirmationDialog for this flow.
• Always provide a cancel action: Include AlertDialogCancel so users can safely back out, in addition to supporting the Escape key.
• Avoid rich content: If the dialog requires detailed explanations, callouts, or form inputs, use Confirmation Modal or Dialog instead.

See Modality for guidance on choosing the appropriate dialog pattern.

Examples

Close only

Warning

Destructive