Dialog

A window overlaid on either the primary window or another dialog window.

overlayinteractive

Loading preview...

Installation

npx baseui-cn add dialog

Usage

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

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description.</DialogDescription>
    </DialogHeader>
    <DialogBody>Content here.</DialogBody>
    <DialogFooter showCloseButton>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Basic

A standard dialog.

Loading preview...

Sizes

Dialog in xs through 7xl sizes.

Loading preview...

Fullscreen

Use variant="fullscreen" for a full-screen dialog.

Loading preview...

No close button

Use showCloseButton={false} to hide the X button.

Loading preview...

Scrollable

A dialog with scrollable content.

Loading preview...

With toast

Confirm an action in the dialog and show a toast notification. The dialog and toast use independent overlay systems, so they don't interfere with each other.

Loading preview...

API

DialogContent

Prop	Type	Default	Description
`variant`	`"default" \| "fullscreen"`	`"default"`	Centered modal or fullscreen inset layout
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl"`	`"lg"`	Max-width breakpoint of the centered dialog (ignored for `"fullscreen"`)
`showCloseButton`	`boolean`	`true`	Render the default × close button in the top-right corner
`noPadding`	`boolean`	`false`	Remove the default `p-6` padding from the popup surface

DialogFooter

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`false`	Append a Close button (outline variant) to the footer

API Reference

See the Base UI Dialog documentation for the full API reference, including all props, data attributes, and CSS classes.