Dialog

Composition preview

Try Dialog alongside its related overlays & menus components. These examples keep all actions local.

Usage

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

<>
<Dialog>
  <DialogTrigger asChild><Button variant="outline">Edit</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>Edit details</DialogTitle><DialogDescription>Update this record.</DialogDescription></DialogHeader>
    <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
  </DialogContent>
</Dialog>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

open/defaultOpen, onOpenChange; DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose

Usage & accessibility

Always name the dialog, manage focus deliberately, and test Escape and nested overlays.

Implementation contract

src/components/ui/dialog.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.