Skip to main content
Alert Dialog component preview (light)
  • 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

sabo/src/components/ui/alert-dialog.tsx
<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>
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