Dialog

A dialog is an overlay shown above other content in an application.

<Dialog>
  <Button>Open Dialog</Button>
  <Modal>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>This is a dialog description.</DialogDescription>
      </DialogHeader>
      <DialogBody>
        <p>Dialog content goes here.</p>
      </DialogBody>
      <DialogFooter>
        <Button slot="close">Cancel</Button>
        <Button slot="close" variant="primary">
          Confirm
        </Button>
      </DialogFooter>
    </DialogContent>
  </Modal>
</Dialog>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/dialog

Usage

Use dialog to grab the user's attention for critical tasks, like confirming actions, providing additional details, or capturing input.

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Modal } from '@/components/ui/modal'

<Dialog>
  <Button>Open dialog</Button>
  <Modal>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>Dialog description</DialogDescription>
      </DialogHeader>
      <DialogBody>Content</DialogBody>
      <DialogFooter>
        <Button slot="close">Close</Button>
      </DialogFooter>
    </DialogContent>
  </Modal>
</Dialog>

Anatomy

The trigger Button and the overlay are siblings inside Dialog. The overlay (Modal, Drawer, or Popover) is a separate component the dialog does not ship, and DialogContent renders inside it. Pass showCloseButton to DialogContent for a built-in close button.

<Dialog>
  <Button>Open dialog</Button>
  <Modal>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Title</DialogTitle>
        <DialogDescription>Description</DialogDescription>
      </DialogHeader>
      <DialogBody>Content</DialogBody>
      <DialogFooter>
        <Button slot="close">Close</Button>
      </DialogFooter>
    </DialogContent>
  </Modal>
</Dialog>

Role

Pass role="alertdialog" to DialogContent for destructive confirmations that interrupt the user and require a response.

<DialogContent role="alertdialog">
  <DialogHeader>
    <DialogTitle>Delete project</DialogTitle>
    <DialogDescription>This action cannot be undone.</DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <Button slot="close">Cancel</Button>
    <Button slot="close" variant="danger">
      Delete
    </Button>
  </DialogFooter>
</DialogContent>

Open state

The dialog opens when the trigger is pressed. Control it with isOpen and onOpenChange (or set defaultOpen), and close it from inside with a Button that has slot="close".

const [isOpen, setOpen] = React.useState(false)

<Dialog isOpen={isOpen} onOpenChange={setOpen}>
  <Button>Open dialog</Button>
  <Modal>{/* ... */}</Modal>
</Dialog>

Examples

Create Issue Form

Delete Confirmation

Async Form Submission

API Reference

Dialog

A DialogTrigger opens a dialog when a trigger element is pressed.

Prop	Type	Default

DialogContent

A dialog is an overlay shown above other content in an application.

Prop	Type	Default
	`ReactNode \| function`	`—`

DialogHeader

The header of the dialog. Contains the title and description.

Supports all header attributes.

Prop	Type	Default

DialogTitle

The heading that labels the dialog.

Prop	Type	Default
	`number`	`3`

DialogDescription

Text that describes the purpose of the dialog.

Prop	Type	Default

DialogBody

The main content area of the dialog.

Supports all div attributes.

Prop	Type	Default

DialogFooter

The footer of the dialog. Contains the dialog's actions.

Supports all footer attributes.

Prop	Type	Default

Last updated on 7/9/2026