Shadcn Dialog

A dialog sits over the page and makes everything else inert. Use it for a short form, a share link, or settings that need an answer before they go back. If they only pick yes or no, that is an Alert Dialog.

Usage

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

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        This can&apos;t be undone. The account is deleted from the servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Put render={<Button />} on the trigger so the Button is the actual control. DialogTitle is required — screen readers announce it when the overlay opens.

Composition

Custom Close Button

Replace the default X with DialogClose around your own button.

No Close Button

showCloseButton={false} hides the top-right X. Overlay click and Escape still dismiss it.

Sticky Footer

Keep DialogFooter outside the scroll region so Save stays on screen.

Scrollable Content

Put max-h-[50vh] overflow-y-auto on the body. The header stays put.

RTL

Wrap with DirectionProvider and dir="rtl". Header text and footer buttons follow the reading direction.

API

DialogContent

DialogFooter

DialogTrigger and DialogClose take render.

Keyboard

Focus stays in the overlay until it closes. Title and description are announced.

Notes

Name the action on the footer button. After it succeeds, a Sonner toast is enough.

With other components

Questions

Related