Dialog

A composable modal dialog built on Base UI's Dialog primitive. It renders an overlay and a centered popup with animated enter/exit transitions, an optional close button, and structured header/footer areas.

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        Edit Profile
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you are done.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input id="username" defaultValue="@peduarte" className="col-span-3" />
          </div>
        </div>
        <DialogFooter>
          <Button>Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Anatomy

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
  DialogOverlay,
  DialogPortal,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description text.</DialogDescription>
    </DialogHeader>
    {/* Body content */}
    <DialogFooter>
      <DialogClose>Cancel</DialogClose>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Basic dialog

<Dialog>
  <DialogTrigger render={<Button />}>Edit Profile</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when you're done.
      </DialogDescription>
    </DialogHeader>
    <Input placeholder="Name" />
    <DialogFooter>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Without close button

Set showCloseButton={false} on DialogContent to hide the default close icon in the top-right corner.

<Dialog>
  <DialogTrigger render={<Button />}>Open</DialogTrigger>
  <DialogContent showCloseButton={false}>
    <DialogHeader>
      <DialogTitle>Terms of Service</DialogTitle>
      <DialogDescription>Please review and accept the terms.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>Decline</DialogClose>
      <Button>Accept</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Footer with built-in close button

Pass showCloseButton to DialogFooter to automatically render an outline "Close" button inside the footer.

<Dialog>
  <DialogTrigger render={<Button />}>View Details</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Details</DialogTitle>
      <DialogDescription>Here are the details you requested.</DialogDescription>
    </DialogHeader>
    <p>Some detail content goes here.</p>
    <DialogFooter showCloseButton>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

Dialog

The root component that manages open/close state. Wraps Base UI's Dialog.Root.

Prop	Type	Default
`open`	`boolean`	—
`onOpenChange`	`(open: boolean) => void`	—
`children`	`ReactNode`	—

DialogTrigger

The element that opens the dialog when clicked. Wraps Base UI's Dialog.Trigger.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

DialogContent

The popup panel rendered in a portal with an overlay behind it. Includes an optional close button in the top-right corner.

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Whether to render the X close button in the top-right corner.
`className`	`string`	—
`children`	`ReactNode`	—

DialogHeader

A <div> that lays out the title and description vertically with consistent spacing.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

DialogFooter

A <div> for action buttons. Stacks vertically on small screens and aligns right on larger screens.

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`false`	When `true`, appends an outline "Close" button that dismisses the dialog.
`className`	`string`	—
`children`	`ReactNode`	—

DialogTitle

The dialog heading. Wraps Base UI's Dialog.Title.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

DialogDescription

Secondary text below the title. Wraps Base UI's Dialog.Description.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

DialogClose

An element that closes the dialog when clicked. Wraps Base UI's Dialog.Close.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

DialogOverlay

The backdrop behind the dialog. Renders with a blurred, semi-transparent background.

Prop	Type	Default
`className`	`string`	—

DialogPortal

Portals the dialog content to the end of document.body. Wraps Base UI's Dialog.Portal.

Prop	Type	Default
`children`	`ReactNode`	—