Skip to main content

AlertDialog

A modal dialog implementing Alert, which is the notification pattern for use cases where immediate user action is required. Since the use cases are quite specific, and the component is expected to be used with pretty specific content items, the layout is not implemented as a separate component, the way it is in components like ModalWindow or Menu

Features​

Live example​

Result
Loading...
Live Editor
function AlertDialogExample() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  return (
    <>
      <Button onPress={() => setOpen(true)}>Open</Button>
      {open && (
        <AlertDialog
          type="warning"
          heading="Process 'storybook:start' Is Running"
          body="Do you want to terminate the process 'storybook:start'?"
          checkbox={<Checkbox>Don't ask again</Checkbox>}
          buttons={
            <>
              <Button onPress={close}>Cancel</Button>
              <Button autoFocus onPress={close}>
                Disconnect
              </Button>
              <Button variant="default" onPress={close}>
                Terminate
              </Button>
            </>
          }
          helpButton={
            <Button variant="icon">
              <PlatformIcon icon="actions/help"></PlatformIcon>
            </Button>
          }
          onClose={close}
        />
      )}
    </>
  );
}

Imperative API​

useAlertDialog provides an imperative API for common scenarios that are handled by AlertDialog, such as confirming an action. The imperative API is a set of async helper functions such as confirm, which can get user input during some action handling logic, without needing to handle the state of the dialog UI.

info

useAlertDialog depends on WindowManager to imperatively open modal windows.

Result
Loading...
Live Editor
function AlertDialogImperativeApiExample() {
  const { confirm } = useAlertDialog();

  const doDelete = async () => {
    const confirmed = await confirm({
      title: "Delete?",
      message: (
        <div style={{ width: 354 }}>
          Delete 2 directories and 3 files?
          <br />
          All files and subdirectories in the selected directories will be
          deleted. <br />
          You might not be able to fully undo this operation!
        </div>
      ),
      okText: "Delete",
    });
    if (confirmed) {
      alert("Deleting!");
    }
  };
  return <Button onPress={doDelete}>Delete</Button>;
}

render(
  <WindowManager>
    <AlertDialogImperativeApiExample />
  </WindowManager>
);