Dialog

Modal dialog with backdrop, focus trapping, animated entrance/exit, and slot-based content. Built on GlobalOverlay and Framer Motion. Also exports useDialog hook.

Import

import { Dialog, DialogHeader, DialogContent, DialogFooter, useDialog } from 'reablocks';

Dialog Props

Slot-Based Usage (Recommended)

<Dialog open={isOpen} onClose={close}>
  <DialogHeader>My Title</DialogHeader>
  <DialogContent>
    <p>Dialog body content here.</p>
  </DialogContent>
  <DialogFooter>
    <Button onClick={save} color="primary">Save</Button>
    <Button onClick={close}>Cancel</Button>
  </DialogFooter>
</Dialog>

Legacy Props Usage

<Dialog open={isOpen} onClose={close} header="My Title">
  {() => (
    <div>Dialog body content here.</div>
  )}
</Dialog>

useDialog Hook

const { isOpen, setOpen, toggleOpen, Dialog: DialogComponent } = useDialog();

<Button onClick={() => setOpen(true)}>Open</Button>
<DialogComponent size="600px">
  <DialogHeader>Title</DialogHeader>
  <DialogContent>Content</DialogContent>
</DialogComponent>

Hook Returns

DialogTheme Interface

interface DialogTheme {
  base: string;    // Overlay container (fixed, flex, centered)
  inner: string;   // Dialog box (flex-col, bg, border, rounded, shadow, max-w/h)
  content: string; // Content area (padding, flex-auto, overflow)
  footer: string;  // Footer area (flex, padding)
  header: {
    base: string;       // Header container (flex, justify-between, padding)
    text: string;       // Title text (flex-1, font-bold)
    closeButton: string; // Close button (cursor-pointer, text-size)
  };
}