# Use AlertDialog for Destructive Actions

**MUST** · **ID:** `interactions-ibelick-alert-dialog` · **Category:** interactions
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-ibelick-alert-dialog

> MUST: Use AlertDialog (not Dialog) for destructive or irreversible actions. AlertDialog traps focus and requires explicit confirmation, preventing accidents.

Always use AlertDialog for destructive or irreversible actions to require explicit confirmation

A destructive action should not be one stray click away. An AlertDialog differs from a plain Dialog in exactly the ways that matter here: it is modal, it announces as an alertdialog, it takes focus on the safe action, and it will not dismiss on an outside click — so confirming has to be deliberate.

## Bad — do not do this

`interactions-ibelick-alert-dialog-bad`

```tsx
import { useState } from 'react';

export function IbelickAlertDialogBad() {
  const [deleted, setDeleted] = useState(false);

  const handleDelete = () => {
    // No confirmation - immediate deletion
    setDeleted(true);
  };

  return (
    <div className="space-y-4">
      {!deleted ? (
        <div className="p-4 bg-muted rounded-lg">
          <p className="font-medium">Project: My Important Work</p>
          <p className="text-sm text-muted-foreground mt-1">Created 3 months ago</p>
          <button
            onClick={handleDelete}
            className="mt-3 px-4 py-2 bg-destructive text-destructive-foreground rounded-lg"
          >
            Delete Project
          </button>
        </div>
      ) : (
        <div className="p-4 bg-destructive/10 rounded-lg">
          <p className="text-destructive font-medium">Project deleted!</p>
          <p className="text-sm text-muted-foreground mt-1">No way to recover it...</p>
        </div>
      )}
      <p className="text-xs text-destructive">
        No confirmation dialog - one misclick and data is gone forever
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-ibelick-alert-dialog-good`

```tsx
import { useState } from 'react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';

export function IbelickAlertDialogGood() {
  const [deleted, setDeleted] = useState(false);

  const handleDelete = () => {
    setDeleted(true);
  };

  return (
    <div className="space-y-4">
      {!deleted ? (
        <div className="p-4 bg-muted rounded-lg">
          <p className="font-medium">Project: My Important Work</p>
          <p className="text-sm text-muted-foreground mt-1">Created 3 months ago</p>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="destructive" className="mt-3">
                Delete Project
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete Project?</AlertDialogTitle>
                <AlertDialogDescription>
                  This action cannot be undone. This will permanently delete your project and all associated data.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction variant="destructive" onClick={handleDelete}>
                  Yes, Delete
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      ) : (
        <div className="p-4 bg-muted rounded-lg">
          <p className="font-medium">Project deleted</p>
        </div>
      )}
      <p className="text-xs text-success">
        AlertDialog component requires explicit confirmation before destructive action
      </p>
    </div>
  );
}
```

## References

- [ibelick/ui-skills — baseline-ui](https://github.com/ibelick/ui-skills)
- [Radix AlertDialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog)