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 { useState } from 'react';
import { Dialog, Group, Button, TextInput, Text } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(false);
return (
<>
<Group position="center">
<Button onClick={() => setOpened((o) => !o)}>Toggle dialog</Button>
</Group>
<Dialog
opened={opened}
withCloseButton
onClose={() => setOpened(false)}
size="lg"
radius="md"
>
<Text size="sm" style={{ marginBottom: 10 }} weight={500}>
Subscribe to email newsletter
</Text>
<Group align="flex-end">
<TextInput placeholder="hello@gluesticker.com" style={{ flex: 1 }} />
<Button onClick={() => setOpened(false)}>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.

Download more icon variants from https://tabler-icons.io/i/search

Dialog component props

NameTypeDescription
children
ReactNode
Dialog content
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"
Predefined border-radius value from theme.radius or number for border-radius in px
shadow
MantineShadow
Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property
size
string | number
Predefined dialog width or number to set width in px
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 1px border with theme.colors.gray[3] color in light color scheme and theme.colors.dark[4] in dark color scheme
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