Alert Dialog

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

SheetDrawer-style panel that slides in from screen edges.

​When to use

​How it differs from Dialog

​Minimal usage

When to use

How it differs from Dialog

Minimal usage