Dialog

A modal overlay that focuses user attention on a specific task or piece of content. Renders above the page with a backdrop overlay.

Basic Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Edit Profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when done.
      </DialogDescription>
    </DialogHeader>
    <p className="text-sm text-muted-foreground">
      Dialog body content goes here.
    </p>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Save Changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

PropTypeDefaultDescription
openboolean—Controlled open state of the dialog.
onOpenChange(open: boolean) => void—Callback fired when the open state changes.

Accessibility

Built on Radix primitives, so focus is trapped inside the overlay while open and restored to the trigger on close. Escape closes the overlay. The backdrop is marked aria-hidden.

Every dialog must have a DialogTitle. If the title should be visually hidden, wrap it in VisuallyHiddenfrom Radix — the accessible name is required even when the design doesn't show it.