Modal

The modal is a container for some UI that is conditionally overlaid on top of the application. It dims the background while opened. We may dismiss it with escape, the close button (if it's displayed), or with a click outside.

The modal works with an opened prop: it expects a boolean state variable, which effectively controls the display.

reminder: We may get such a boolean state variable with useDisclosure, which also gives semantically correct open and close state-mutation functions.

When the user attempts to dismiss the modal, Mantine calls the onClose handler: We have to provide one. This handler has the responsibility to toggle the opened state back to false if it approves the dismiss. It will usually call the close function.

import { useDisclosure } from '@mantine/hooks';
import { Modal, Button } from '@mantine/core';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Modal opened={opened} onClose={close}>
        {/* Modal content */}
      </Modal>

      <Button .. onClick={open}>
        Open modal
      </Button>
    </>
  );
}

The modal has a top section by default. It may have

• a close button, which we may remove with withCloseButton={false}.
• a title, which accepts any React node (not only text).

The inner content usually comes with controls: inputs and a submit button.