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

• Alert UI with various options such as type, help button, etc.
• Imperative API for common patterns, such as confirmation.

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} /> )} </> ); }

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> );

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>
);