Dialog

Usage

import { Dialog } from "@chakra-ui/react"

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.CloseTrigger />
      <Dialog.Header>
        <Dialog.Title />
      </Dialog.Header>
      <Dialog.Body />
      <Dialog.Footer />
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

Examples

Sizes

Use the size prop to change the size of the dialog component.

Cover

Use the size="cover" prop to make the dialog component cover the entire screen while revealing a small portion of the page behind.

Fullscreen

Use the size="full" prop to make the dialog component take up the entire screen.

Responsive Size

Use responsive values for the size prop to make the dialog adapt to different screen sizes.

We recommend using exact breakpoints values instead of using a base to ensure styles are properly contained.

// ❌ Might cause a style leak between the breakpoints
<Dialog.Root size={{ base: "full", md: "lg" }}></Dialog.Root>

// Works ✅
<Dialog.Root size={{ mdDown: "full", md: "lg" }}></Dialog.Root>

Placement

Use the placement prop to change the placement of the dialog component.

Controlled

Use the open and onOpenChange prop to control the visibility of the dialog component.

Store

An alternative way to control the dialog is to use the RootProvider component and the useDialog store hook.

This way you can access the dialog state and methods from outside the dialog.

Context

Use the DialogContext component to access the dialog state and methods from outside the dialog.

Nested Dialogs

You can nest dialogs by using the Dialog.Root component inside another Dialog.Root component.

Open From Popover

Dialogs can be triggered from within a popover. The dialog will appear above the popover thanks to the unified z-index system.

Open From Menu

Use a controlled dialog to open it from a menu item action, like a delete confirmation.

Initial Focus

Use the initialFocusEl prop to set the initial focus of the dialog component.

Inside Scroll

Use the scrollBehavior=inside prop to change the scroll behavior of the dialog when its content overflows.

Outside Scroll

Use the scrollBehavior=outside prop to change the scroll behavior of the dialog when its content overflows.

Motion Preset

Use the motionPreset prop to change the animation of the dialog component.

Alert Dialog

Set the role: "alertdialog" prop to change the dialog component to an alert dialog.

Close Button Outside

Here's an example of how to customize the Dialog.CloseTrigger component to position the close button outside the dialog component.

Non-Modal Dialog

We don't recommend using a non-modal dialog due to the accessibility concerns they present. In event you need it, here's what you can do:

• set the modal prop to false
• set pointerEvents to none on the Dialog.Positioner component
• (optional)set the closeOnInteractOutside prop to false

DataList

Here's an example of how to compose the dialog component with the DataList component.

Props

Root