Dialog

Focus attention on a short task or information above the page.

Purpose

Focus attention on a short task or information above the page.

When to use

Ask for a focused decision.
Present a short task requiring attention.

When not to use

Keep routine information in the page flow.
Avoid lengthy workflows in a dialog.

Install

pnpm dlx shadcn@4.23.0 add @kaotypr-ui/dialog

Examples

Basic

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

export function DialogBasic() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Workspace details</DialogTitle>
          <DialogDescription>Review your workspace settings.</DialogDescription>
        </DialogHeader>
        <DialogFooter showCloseButton />
      </DialogContent>
    </Dialog>
  );
}

Form

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

export function DialogForm() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Edit profile</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>Update your display name.</DialogDescription>
        </DialogHeader>
        <input aria-label="Display name" className="border p-2" />
        <DialogFooter showCloseButton />
      </DialogContent>
    </Dialog>
  );
}

Props and variants

Prop	Values	Default	Notes
`DialogContent.showCloseButton`	true, false	true	Shows the top close control; compact density reduces content gap and padding.
`DialogFooter.showCloseButton`	true, false	false	Adds a Close button to the footer.

For unchanged APIs, see Radix and shadcn.

States

Open
Closed

Keyboard

Key	Action
Enter or Space	Activate the trigger.
Tab or Shift+Tab	Move focus within the dialog.
Escape	Close and return focus to the trigger.

Accessibility notes

Provide a title and description.
Provide a clear way to close the dialog.

Do and don’t

Do

A descriptive title identifies the task.

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

export function DialogDoTitle() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Delete draft?</DialogTitle>
          <DialogDescription>This action removes the draft.</DialogDescription>
        </DialogHeader>
        <DialogFooter showCloseButton />
      </DialogContent>
    </Dialog>
  );
}

Don’t

Routine information belongs in the page flow.

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

export function DialogDontRoutine() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Tip</DialogTitle>
          <DialogDescription>
            Workspace members can update profiles.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter showCloseButton />
      </DialogContent>
    </Dialog>
  );
}

Source release

Revision 15b921e27444eb596901fc1a7d45cb5760cf0abd

Path components/ui/dialog.tsx

Status pristine