Modal

Usage

Modal is wrapped in Portal component, it can be rendered only on client as createPortal is not available during server side rendering:

import React, { 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!"
      >
        <AuthenticationForm />
      </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.

<Modal
  opened={opened}
  onClose={() => setOpened(false)}
  hideCloseButton
>
  Modal without header, press escape or click on overlay to close
</Modal>

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 exceed

<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

Modal has 6 predefined sizes: xs, sm, md (default), lg, xl and full. You can get these values by importing MODAL_SIZES:

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

Customize overlay

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

const theme = useMantineTheme();

<Modal
  opened={opened}
  onClose={() => setOpened(false)}
  title="Introduce yourself!"
  overlayColor={theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[2]}
  overlayOpacity={0.95}
>
  <AuthenticationForm />
</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

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

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" />