Dialog

Display fixed overlay at any side of the screen
Import

Usage

Dialog is a simplified version of Modal component. It does not include most of accessibility and usability Modal features:

  • Focus trap is not available
  • Does not close on click outside
  • Does not have overlay

Use Dialog to attract attention with not important information or action, for example, you can create an email subscription form:

import { useDisclosure } from '@mantine/hooks';
import { Dialog, Group, Button, TextInput, Text } from '@mantine/core';
function Demo() {
const [opened, { toggle, close }] = useDisclosure(false);
return (
<>
<Group position="center">
<Button onClick={toggle}>Toggle dialog</Button>
</Group>
<Dialog opened={opened} withCloseButton onClose={close} size="lg" radius="md">
<Text size="sm" mb="xs" weight={500}>
Subscribe to email newsletter
</Text>
<Group align="flex-end">
<TextInput placeholder="hello@gluesticker.com" sx={{ flex: 1 }} />
<Button onClick={close}>Subscribe</Button>
</Group>
</Dialog>
</>
);
}

Change position

Dialog is rendered in Portal and has fixed position, set position prop to control dialog's position:

// Dialog in top left corner
<Dialog position={{ top: 20, left: 20 }} />
// Dialog in bottom left corner
<Dialog position={{ bottom: 20, left: 20 }} />

Paper props

Dialog supports all props from Paper component, you can customize shadow, padding and radius same way.

<Dialog shadow="xl" p={30} radius="sm" />

Change transition

Dialog supports all transitions from Transition component. To change transition provide following props:

  • transition – predefined transition name or transition object
  • transitionDuration – transition duration in ms, defaults to 200ms
  • transitionTimingFunction – timing function, defaults to theme.transitionTimingFunction
<Dialog transition="slide-up" transitionDuration={300} transitionTimingFunction="ease" />

Accessibility

Dialog is not accessible and most likely will not be announced by screen reader, make sure you do not put any important information. In most cases it would be much better to select Modal, Drawer or Notifications.

Dialog component props

NameTypeDescription
children
ReactNode
Dialog content
keepMounted
boolean
If set dialog will not be unmounted from the DOM when it is hidden, display: none styles will be added instead
onClose
() => void
Called when close button is clicked
opened *
boolean
Opened state
position
{ top?: string | number; left?: string | number; bottom?: string | number; right?: string | number; }
Dialog position (fixed in viewport)
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
shadow
MantineShadow
Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property
size
string | number
Dialog width
transition
MantineTransition
Appear/disappear transition
transitionDuration
number
Duration in ms of modal transitions, set to 0 to disable all animations
transitionTimingFunction
string
Transition timing function, defaults to theme.transitionTimingFunction
withBorder
boolean
Adds border styles
withCloseButton
boolean
Display close button at the top right corner
zIndex
ZIndex
Dialog container z-index

Dialog component Styles API

NameStatic selectorDescription
root.mantine-Dialog-rootRoot element
closeButton.mantine-Dialog-closeButtonClose button