Dialog

import { Dialog, DialogTrigger, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, DialogContent } from '@elirobinson/react/components/organisms/Dialog';

import { Button } from '@elirobinson/react/components/atoms/Button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@elirobinson/react/components/organisms/Dialog';

export default function Basic() {
  return (
    <Dialog>
      <DialogTrigger className="ds-button ds-button--primary">Get in touch</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Contact Eli</DialogTitle>
          <DialogDescription>
            Practical AI consulting and tech support. No contracts required.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose />
          <Button variant="accent">Send message</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

When to use it

Use Dialog when something needs to fully interrupt the page — confirming a destructive action, collecting the minimum info needed to continue, a message that has to be dismissed before anything else happens. It's built on the real <dialog> element, so the modality (focus trap, Escape-to-close, blocking the rest of the page) comes from the browser, not from custom JavaScript.

For content that's useful but skippable — a hint, a filter panel, extra detail on click — use Popover instead. Nothing about it blocks the page.

Controlled

Open a dialog from outside without rendering a DialogTrigger at all — pass open and onOpenChange and drive it from wherever the action originates, such as a row action or a destructive-confirmation flow.

import { useState } from 'react';

import { Button } from '@elirobinson/react/components/atoms/Button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@elirobinson/react/components/organisms/Dialog';

export default function Controlled() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        Delete guide
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete &quot;U8 Soccer Season Plan&quot;?</DialogTitle>
            <DialogDescription>
              This removes the guide from your library. Anyone who already downloaded it keeps their
              copy.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose>Cancel</DialogClose>
            <Button variant="primary" onClick={() => setOpen(false)}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}

Props

Accessibility

• Built on the native <dialog> element via showModal()/close() — not a custom-built modal. The browser supplies the modal semantics, the focus trap, and the top-layer stacking.
• aria-labelledby and aria-describedby point at fixed ids generated once per Dialog, wired to DialogTitle and DialogDescription respectively. Always render a DialogTitle — it's the dialog's accessible name. DialogDescription is optional, but the aria-describedby reference exists whether or not you render one.
• Keyboard: Escape closes the dialog through the native <dialog> cancel/close event — genuine browser behavior, not a custom keydown handler. Tab/Shift+Tab are trapped inside the dialog automatically by the browser's own modal focus management while it's open.
• Initial focus is also native showModal() behavior — the browser focuses the first focusable element inside the dialog (or the dialog itself if there isn't one) the moment it opens. Nothing in this component manages focus manually.
• Clicking the backdrop closes the dialog: a click handler compares event.target against the <dialog> element itself (not .ds-dialog__inner), since a native <dialog>'s backdrop region is the element's own box outside its content.
• DialogTrigger and DialogClose are both plain <button type="button">s with no extra keyboard behavior beyond the native button contract (Enter/Space activate).

Related