Dialog

Category: Overlay — Pattern: Base UI Overlay

Dependency: @base-ui-components/react/dialog

Import

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "@hareru/ui"

Exports

Structure

• DialogTrigger [trigger] (expected)
• DialogContent [content] (expected)
  • DialogHeader [container]
  • DialogFooter [container]
  • DialogTitle [label] (expected)
  • DialogDescription [description]
  • DialogClose [close]

(expected) = recommended in canonical composition, not runtime-required.

Accessibility

• Roles: dialog
• ARIA attributes: aria-label
• Keyboard:
  • Escape to close
  • Tab to cycle focus within dialog
• Notes: ARIA dialog role and focus trapping provided by Base UI.

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
  Button,
} from "@hareru/ui"

<Dialog>
  <DialogTrigger asChild><Button>Open Dialog</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    <p>Content</p>
    <DialogFooter>
      <DialogClose asChild><Button variant="outline">Close</Button></DialogClose>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Notes

• DialogContent renders the backdrop overlay and a close (×) button automatically.
• DialogTitle is required for screen reader accessibility. Use DialogDescription when additional context is helpful.
• Controlled mode: pass open and onOpenChange to <Dialog>.