Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Dialog Props

PropTypeDefault
open
boolean
-
onOpenChange
(open: boolean) => void
-
modal
boolean
true

Dialog.Content Props

PropTypeDefault
width
string | number
-
overlayBlur
boolean
-
overlayClassName
string
-
overlayStyle
CSSProperties
-
className
string
-
side
"top" | "right" | "bottom" | "left"
-
ariaLabel
string
-
ariaDescription
string
-

Dialog.Header Props

PropTypeDefault
className
string
-
children
ReactNode
-

Dialog.Title Props

PropTypeDefault
className
string
-
children
ReactNode
-

Dialog.Body Props

PropTypeDefault
className
string
-
children
ReactNode
-

Dialog.Description Props

PropTypeDefault
className
string
-

Dialog.Trigger Props

PropTypeDefault
asChild
boolean
-
className
string
-

Dialog.CloseButton Props

PropTypeDefault
asChild
boolean
-
className
string
-

Dialog.Footer Props

PropTypeDefault
className
string
-
children
ReactNode
-

Examples

Controlled Dialog

Example of a controlled dialog with custom state management.

(function ControlledDialog() {
  const [open, setOpen] = React.useState(false);
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <Dialog.Trigger asChild>
        <Button>Controlled Dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content width={600}>
        <Dialog.Body>
          <Dialog.Title>Controlled State</Dialog.Title>
          <Dialog.Description>
            This dialog's state is controlled externally.
          </Dialog.Description>
        </Dialog.Body>
      </Dialog.Content>
    </Dialog>
  );
})

Custom Width and Overlay

Example with custom width and overlay styling.

<Dialog>
  <Dialog.Trigger asChild>
    <Button>Styled Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content
    width="400px"
    overlayBlur
    overlayClassName="custom-overlay"
    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
  >
    <Dialog.Body>
      <Dialog.Title>Custom Styled Dialog</Dialog.Title>
      <Dialog.Description className="custom-description">
        This dialog has custom width and overlay styling.
      </Dialog.Description>
    </Dialog.Body>
  </Dialog.Content>
</Dialog>

With Header and Body

Example with header and body.

<Dialog>
  <Dialog.Trigger asChild>
    <Button>Only Header and Body</Button>
  </Dialog.Trigger>
  <Dialog.Content
    width="400px"
    overlayBlur
    overlayClassName="custom-overlay"
    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
  >
    <Dialog.Header>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.CloseButton />
    </Dialog.Header>
    <Dialog.Body>
      <Dialog.Description className="custom-description">
        This dialog has custom width and overlay styling.
      </Dialog.Description>
    </Dialog.Body>
  </Dialog.Content>
</Dialog>

Example with header and body.

<Dialog>
  <Dialog.Trigger asChild>
    <Button>Only Footer and Body</Button>
  </Dialog.Trigger>
  <Dialog.Content
    width="400px"
    overlayBlur
    overlayClassName="custom-overlay"
    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
  >
    <Dialog.Body>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description className="custom-description">
        This dialog has custom width and overlay styling.
      </Dialog.Description>
    </Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close asChild>
        <Button color="neutral">Close</Button>
      </Dialog.Close>
      <Button color="danger">Cancel</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>

Accessibility

  • Dialog has role="dialog" and aria-modal="true"
  • Uses aria-label or aria-labelledby to identify the dialog
  • Uses aria-describedby to provide additional context

On this page