Modal

Modal with optional header
Import

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';
Prop valueModal width
xs320
sm380
md440
lg620
xl780
full100%

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" />
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback