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

@instruments/materia-ui/components/alert-dialog

<AlertDialog>
  <AlertDialogTrigger
    render={<Button emphasis="outline" icon={Trash2} tone="danger" />}
  >
    Remove material
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Remove this material?</AlertDialogTitle>
      <AlertDialogDescription>
        Terrazzo Bianco will be taken off your Coastal Kitchen board. This
        can'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

AlertDialogAction

Prop	Type	Default	Description
className	`string`		Extra classes merged after the Button styles.
tone	`ButtonTone`		Button tone; pass `"danger"` to signal a destructive confirmation.

AlertDialogCancel

Prop	Type	Default	Description
className	`string`

AlertDialogContent

Prop	Type	Default	Description
className	`string`

AlertDialogDescription

Prop	Type	Default	Description
className	`string`

AlertDialogOverlay

Prop	Type	Default	Description
className	`string`

AlertDialogTitle

Prop	Type	Default	Description
className	`string`

Also exports

componentAlertDialog
componentAlertDialogFooter
componentAlertDialogHeader
componentAlertDialogPortal
componentAlertDialogTrigger

Composition

Builds on

Button, Flex