AlertDialog

Modal confirmation dialog for destructive or irreversible actions. Traps focus and supports keyboard navigation.

Danger variant

function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete account
      </Button>
      <AlertDialog
        open={open}
        onClose={() => setOpen(false)}
        onConfirm={() => deleteAccount()}
        title="Delete account?"
        description="This is permanent and cannot be undone."
        confirmLabel="Yes, delete"
        variant="danger"
      />
    </>
  )
}

Warning variant

<AlertDialog
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={() => disableFeature()}
  title="Disable monitoring?"
  description="You will stop receiving alerts."
  confirmLabel="Disable"
  variant="warning"
/>

Reference

Prop	Type	Default	Description
open	boolean	—	Whether the dialog is visible.
onClose	() => void	—	Called when the dialog is dismissed (Cancel, Escape, backdrop click).
onConfirm	() => void	—	Called when the confirm button is clicked.
title	string	—	Dialog heading.
description	string	—	Optional explanatory text.
confirmLabel	string	'Confirm'	Label for the confirm button.
cancelLabel	string	'Cancel'	Label for the cancel button.
variant	'danger' \| 'warning'	'danger'	Color scheme of the confirm button.