Dialog

Centered modal surface, built on Radix Dialog.

Default

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="primary">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

Component	Notable props
Dialog	open, defaultOpen, onOpenChange, modal
DialogTrigger	asChild
DialogContent	density: "comfortable" (default) \| "compact" — shell 20/12, section 16/8, header gap 8/4. Plus onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside.
DialogTitle	Required for a11y — wrap in VisuallyHidden to hide
DialogDescription	Optional supporting copy
DialogClose	asChild — renders a close affordance

Source

packages/react/src/components/dialog.tsx · Figma node 2819:24561