Dialog

from

Installation

Usage

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPortal>
    <DialogBackdrop />
    <DialogPopup>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>Dialog Description</DialogDescription>
      </DialogHeader>
      <p>Dialog Content</p>
      <DialogFooter>
        <button>Accept</button>
      </DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogPopup>
  </DialogPortal>
</Dialog>

API Reference

The keepMounted property is not supported in the DialogPortal component, as it is used for animation.

DialogOverlay

Base UI API Reference - Dialog.Backdrop

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.2, ease: 'easeInOut' }`
`...props?`	`HTMLMotionProps<"div">`	-

The render property is not supported in the DialogBackdrop component, as it is used for animation.

DialogPopup

Base UI API Reference - Dialog.Popup

Prop	Type	Default
`from?`	`'top' \| 'bottom' \| 'left' \| 'right'`	`top`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 150, damping: 25 }`
`...props?`	`HTMLMotionProps<"div">`	-

The render property is not supported in the DialogPopup component, as it is used for animation.

DialogClose

Base UI API Reference - Dialog.Close

DialogHeader

Prop	Type	Default
`...props?`	`React.ComponentProps<'div'>`	-

DialogTitle

Base UI API Reference - Dialog.Title

DialogDescription

Base UI API Reference - Dialog.Description

DialogFooter

Prop	Type	Default
`...props?`	`React.ComponentProps<'div'>`	-

Credits

Base UI Dialog

Dialog

On this page