README.mdx

name	menu	route
Dialog Overlay	Components	/components/dialog-overlay

Dialog Overlay

A small pop-up window to display additional content or request action from the user.

() => {
  const [showDialog, setShowDialog] = React.useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setShowDialog(true)}>
        Open Dialog
      </Button>
      <DialogOverlay
        isOpen={showDialog}
        onDismiss={() => setShowDialog(false)}
      />
    </>
  );
};

State

Dialog is a styled extension of Reach UI's "Dialog" component, with state handled via isOpen and onDismiss. More information on these props, can be found in the Reach UI documentation.

Examples on this page show usage with React Hooks, but this could also be handled via higher-order components or libaries such as Recompose.