> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Alert Dialog

> Destructive action confirmation dialog.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/alert-dialog-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=4e704cbefb9de00c315758d0dfe74e75" alt="Alert Dialog component preview (light)" width="400" data-path="images/ui/alert-dialog-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/alert-dialog.tsx`

### When to use

* Use for destructive or high-impact actions: delete, reset, revoke.
* Requires explicit choice (Confirm or Cancel). Avoid accidental dismissal.
* Copy should clearly state the consequence.

### How it differs from Dialog

* Stricter UX for confirmation flows.
* Uses “alertdialog” semantics so screen readers announce priority and keep focus until resolved.

### Minimal usage

```tsx sabo/src/components/ui/alert-dialog.tsx theme={null}
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Confirm</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
 </AlertDialog>
```

<Note>
  This component forwards all props from Radix Alert Dialog primitives (Root/Trigger/Content, etc.). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/alert-dialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog)
</Note>