Modal

Usage

import { useState } from 'react';
import { Modal, Button, Group } from '@mantine/core';

function Demo() {
  const [opened, setOpened] = useState(false);

  return (
    <>
      <Modal
        opened={opened}
        onClose={() => setOpened(false)}
        title="Introduce yourself!"
      >
        {/* Modal content */}
      </Modal>

      <Group position="center">
        <Button onClick={() => setOpened(true)}>Open Modal</Button>
      </Group>
    </>
  );
}

Remove title and close button

You can remove modal title and close button. It will still be possible to close modal by clicking on overlay or pressing escape.

import { Modal } from '@mantine/core';

function Demo() {
  return (
    <Modal withCloseButton={false}>
      Modal without header, press escape or click on overlay to close
    </Modal>
  );
}

Center modal vertically

import { Modal } from '@mantine/core';

function Demo() {
  return <Modal centered /* ...other props */ />;
};

Change size

You can change modal width by setting size prop to predefined size or any valid width, for example, 55% or 200px. Size controls modal width, max-width is set to 100% with spacing on left and right, no matter what size is passed 100% will not be exceeded:

<Modal size="sm" /> // -> predefined small size
<Modal size={378} /> // -> size in px
<Modal size="55%" /> // -> size in %
<Modal size="calc(100vw - 87px)" /> // -> size with calc
<Modal size="255%" /> // -> max-width is set to 100%, won't work

Customize overlay

Modal uses Overlay component, you can change overlay opacity, blur and color:

import { Modal, useMantineTheme } from '@mantine/core';

function Demo() {
  const theme = useMantineTheme();

  return (
    <Modal
      overlayColor={theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[2]}
      overlayOpacity={0.55}
      overlayBlur={3}
    >
      {/* Modal content */}
    </Modal>
  );
}

Modal with overflow

You can control modal vertical overflow behavior by setting overflow prop:

// (default) – overflow is handled by modal wrapper
<Modal overflow="outside" />

// overflow is handled by modal body
<Modal overflow="inside" />

Change transitions

Modal is built with Transition component.

You can change transitions with props:

• transition – predefined transition name or transition object
• transitionDuration – transition duration in ms, defaults to 300ms. Note that, modal has two elements which are animated: overlay and modal body. Overlay changes opacity during transition and its animation is twice as fast as modal body.
• transitionTimingFunction – timing function, defaults to theme.transitionTimingFunction

import { Modal } from '@mantine/core';

function Demo() {
  return (
    <Modal
      transition="fade"
      transitionDuration={600}
      transitionTimingFunction="ease"
    />
  );
}

Initial focus

Modal uses use-focus-trap to manage focus. To specify initial focus element add data-autofocus attribute:

<Modal>
  <input />
  {/* Second input in modal will have initial focus */}
  <input data-autofocus />
  <input />
</Modal>

Control behavior

The following props can be used to control Modal behavior. In most cases you should not turn these features off as it will make your modal less accessible.

• trapFocus – defines whether focus should be trapped inside modal
• closeOnEscape – defines whether modal should be closed when user presses Escape key
• closeOnClickOutside – defines whether modal should be closed when user clicks outside of modal body

Accessibility and usability

• When modal is opened, focus is trapped inside and vertical scroll is locked at current position
• When user clicks on overlay or presses escape modal closes
• Modal transitions are disabled if user prefers to reduce motion
• Modal wrapper has aria-modal="true" and role="dialog" attributes
• Modal wrapper has aria-labelledby and aria-describedby pointing to modal title and body

For better screen reader support set closeButtonLabel prop:

// sets title attribute on close button
<Modal closeButtonLabel="Close authentication modal" />