Dialog

Used to display a dialog prompt

AI TipWant to skip the docs? Use the MCP Server

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.

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.

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

Prop	Default	Type
`closeOnEscape`	`true`	`boolean` Whether to close the dialog when the escape key is pressed
`closeOnInteractOutside`	`true`	`boolean` Whether to close the dialog when the outside is clicked
`defaultOpen`	`false`	`boolean` The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`modal`	`true`	`boolean` Whether to prevent pointer interaction outside the element and hide all content below it
`preventScroll`	`true`	`boolean` Whether to prevent scrolling behind the dialog when it's opened
`role`	`'dialog'`	`'dialog' \| 'alertdialog'` The dialog's role
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`trapFocus`	`true`	`boolean` Whether to trap focus inside the dialog when it's opened
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`placement`	`top`	`'center' \| 'top' \| 'bottom'` The placement of the component
`scrollBehavior`	`outside`	`'inside' \| 'outside'` The scrollBehavior of the component
`size`	`md`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'cover' \| 'full'` The size of the component
`motionPreset`	`scale`	`'scale' \| 'slide-in-bottom' \| 'slide-in-top' \| 'slide-in-left' \| 'slide-in-right' \| 'none'` The motionPreset of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`aria-label`		`string` Human readable label for the dialog, in event the dialog title is not rendered
`finalFocusEl`		`() => MaybeElement` Element to receive focus when the dialog is closed
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string positioner: string backdrop: string content: string closeTrigger: string title: string description: string }>` The ids of the elements in the dialog. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`initialFocusEl`		`() => MaybeElement` Element to receive focus when the dialog is opened
`onEscapeKeyDown`		`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function to call when the dialog's open state changes
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`open`		`boolean` The controlled open state of the dialog
`persistentElements`		`(() => Element \| null)[]` Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`present`		`boolean` Whether the node is present (controlled by the user)
`restoreFocus`		`boolean` Whether to restore focus to the element that had focus before the dialog was opened

Action Bar

Drawer

Dialog

Usage

Examples

Sizes

Cover

Fullscreen

Responsive Size

Placement

Controlled

Store

Context

Nested Dialogs

Initial Focus

Inside Scroll

Outside Scroll

Motion Preset

Alert Dialog

Close Button Outside

DataList

Props

Root

Dialog

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Usage