Dialog

import { DialogDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Dialog);

Usage

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

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

Use Dialog to attract attention with non-important information or actions. For example, you can create an email subscription form:

Change position

Dialog is rendered in Portal and has a fixed position. Set the position prop to control the dialog's position:

import { Dialog } from '@mantine/core';

function Demo() {
  return (
    <>
      <Dialog position={{ top: 20, left: 20 }} opened>
        Dialog in top left corner
      </Dialog>
      <Dialog position={{ bottom: 20, left: 20 }} opened>
        Dialog in bottom left corner
      </Dialog>
    </>
  );
}

Accessibility

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