AlertDialog

Modal confirmation dialog that interrupts the user for a decision that can't be dismissed by clicking outside — use for destructive or irreversible actions. Open state is controlled (open) or uncontrolled (defaultOpen); compose with AlertDialogTrigger and AlertDialogContent.

Usage

@desk/ui/components/alert-dialog

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button emphasis="outline" icon={Trash2} tone="danger">
      Remove material
    </Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Remove this material?</AlertDialogTitle>
      <AlertDialogDescription>
        Terrazzo Bianco will be taken off your Coastal Kitchen board. This
        can&apos;t be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction tone="danger">Remove</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Best practices

Use AlertDialog only for a confirm / warn / destructive decision (Cancel + Action); a general modal form or details view is a Dialog.
Route every destructive confirmation here, never a plain Dialog — unlike Dialog it won't dismiss on outside-click / Esc, so the choice stays deliberate.
Give the destructive AlertDialogAction tone="danger" and keep the safe escape as AlertDialogCancel.

Props

Prop	Type	Default	Description
tone	`ButtonTone`		Button tone; pass `"danger"` to signal a destructive confirmation.

Also exports

componentAlertDialog
componentAlertDialogCancel
componentAlertDialogContent
componentAlertDialogDescription
componentAlertDialogFooter
componentAlertDialogHeader
componentAlertDialogOverlay
componentAlertDialogPortal
componentAlertDialogTitle
componentAlertDialogTrigger

Composition

Builds on

Button