Dialog

Centered modal surface for a single focused task — sign-in, a create/edit form, or a confirmation that needs detail. Built on Radix Dialog. Reach for AlertDialog instead when the choice is a blocking, destructive confirm (one decision, no form), and for Sheet when the content is long or secondary and should slide in from an edge rather than interrupt center-screen. Set density="comfortable" (default) for standalone dialogs and density="compact" for dense, utility, or repeated dialogs where tighter spacing reads better.

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