Dialog

Accessible modal dialog for focused interactions that require user attention.

When to use

Confirmations — "Are you sure you want to delete?"
Forms — editing profile, creating a resource.
Detail views — showing expanded info without leaving the page.

When NOT to use

For non-blocking notifications — use an Alert or Toast.
For simple selections — use a Popover or dropdown.

Import

import {
  Dialog, DialogContent, DialogHeader, DialogBody,
  DialogFooter, DialogTitle, DialogDescription, DialogClose,
} from '@mihcm/ui/Dialog';

Basic usage

const [open, setOpen] = useState(false);
 
<Button onClick={() => setOpen(true)}>Open</Button>
<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogClose onClose={() => setOpen(false)} />
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>Make changes here.</DialogDescription>
    </DialogHeader>
    <DialogBody>…</DialogBody>
    <DialogFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button onClick={() => setOpen(false)}>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Sizes

Pass size to DialogContent: sm, md (default), lg, xl, or full.

Composition

DialogContent applies an automatic gap-y-4 row gap between its direct children (Header / Body / Footer). You never need manual mt-* / mb-* between sections — even raw children dropped without DialogBody will have proper breathing room.
DialogBody remains the canonical middle slot when you want matched horizontal padding (p-6) and scroll containment for long content.
DialogHeader / DialogFooter are optional layout helpers. Skip them for minimal dialogs.
For destructive confirmations, use AlertDialog — it prevents accidental dismissal via outside click.
Nest a Form inside DialogContent for inline editing flows.
The dialog traps focus — interactive content inside must be keyboard-accessible.

AlertDialog — modal confirmation that blocks outside click.
Sheet — side-panel overlay for forms and detail views.
Drawer — mobile-friendly bottom sheet.
Popover — non-modal floating panel.