ComponentCompound

Dialog

A modal dialog with compound components for trigger, overlay, content, and actions. Uses the headless @refraction-ui/dialog core.

Live Example

Click a button to open a dialog. Press Escape or click the overlay to close.

Installation

$pnpm add @refraction-ui/react-dialog

Usage

tsx

import {
  Dialog,
  DialogTrigger,
  DialogOverlay,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  Button,
} from '@refraction-ui/react'

export function MyDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogOverlay>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Are you sure?</DialogTitle>
            <DialogDescription>
              This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button>Confirm</Button>
          </DialogFooter>
        </DialogContent>
      </DialogOverlay>
    </Dialog>
  )
}

Dialog Props

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	--	Callback when open state changes.
`modal`	`boolean`	`true`	Whether the dialog behaves as a modal.

Compound Components

Prop	Type	Default	Description
`DialogTrigger`	`ButtonHTMLAttributes`	--	Button that toggles the dialog open/closed.
`DialogOverlay`	`HTMLAttributes<HTMLDivElement>`	--	Backdrop overlay that closes dialog on click.
`DialogContent`	`HTMLAttributes<HTMLDivElement>`	--	The dialog content panel. Handles Escape key.
`DialogHeader`	`HTMLAttributes<HTMLDivElement>`	--	Header section with flex column layout.
`DialogTitle`	`HTMLAttributes<HTMLHeadingElement>`	--	Dialog title (h2) linked via aria-labelledby.
`DialogDescription`	`HTMLAttributes<HTMLParagraphElement>`	--	Dialog description linked via aria-describedby.
`DialogFooter`	`HTMLAttributes<HTMLDivElement>`	--	Footer section with action buttons layout.
`DialogClose`	`ButtonHTMLAttributes`	--	Button that closes the dialog.