Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

AlertDialog

Use an AlertDialog to confirm a potentially destructive action taken by the user. AlertDialog composes the Dialog component.

Basic usage

Delete
function AlertDialogExample() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <React.Fragment>
      <Button intent="danger" onPress={() => setIsOpen(true)}>
        Delete
      </Button>

      <AlertDialog
        isOpen={isOpen}
        confirmLabel="Delete"
        subtitle="This action cannot be undone. Proceed with caution."
        title={"Do you really want to delete your account?"}
        onConfirm={() => {
          window.alert("Yup. I did it.");
        }}
        onClose={() => {
          setIsOpen(false);
        }}
      />
    </React.Fragment>
  );
}

API

AlertDialog
isOpen*boolean
onConfirm*() => void
onCancel() => void
onClose*() => void
title*string
subtitlestring
confirmLabelstring
intentButtonIntent