Dialog

Display fixed overlay at any side of the screen

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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

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.

Go back

Affix – @mantine/core

Up next

Drawer – @mantine/core

Dialog component props

Name	Type	Description
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