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

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

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

Change transition

Dialog supports all transition 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

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

TypeScript

Component props type

Import component props type:

import type { DialogProps } from '@mantine/core';

DialogProps extends React.ComponentPropsWithoutRef<'div'>, all other props are available under Component props tab.

DialogStylesNames type

DialogStylesNames type is a union with Dialog Styles API names:

import type { DialogStylesNames } from '@mantine/core';
const dialogClasses: Partial<Record<DialogStylesNames, 'string'>> = {
root: 'dialog-root',
closeButton: 'dialog-closeButton',
};
<Dialog classNames={dialogClasses} />;

See full styles descriptions list under Styles API tab.

Build fully functional accessible web applications faster than ever
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