Dialog

import { Dialog } from "@/ui";

Dialog matches the Figma Dialog_info component. It is the panel that the library, publishing, workflow review and workbook screens use for confirmations and short forms. It draws the frame: a 4px coloured rail along the top, a state icon, the title and a close button, your content, and a footer with Cancel on the left and Confirm on the right.

AnatomyCopy Anchor Link

Shown here without its backdrop so you can see the parts.

<Dialog size="sm" title="Rename dashboard" confirmLabel="Rename" onClose={close} onCancel={close} onConfirm={save}>
  <TextInput label="Dashboard name" value={name} onChange={(e) => setName(e.target.value)} />
</Dialog>

Opening a dialogCopy Anchor Link

Keep an open flag in state and render the Dialog inside a backdrop only while it is true. The wrapper gives it the dialog role and a name, closes on Escape and on a click outside, moves focus into the dialog when it opens and back to the trigger when it closes.

function PublishDialog({ changes, onPublish, onClose }) {
  const box = useRef(null);

  useEffect(() => {
    const back = document.activeElement;
    box.current?.querySelector("input, textarea, button:not([aria-label='Close'])")?.focus();
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => { window.removeEventListener("keydown", onKey); back?.focus?.(); };
  }, [onClose]);

  return (
    <div className="fixed inset-0 z-[80] grid place-items-center p-4 bg-[rgba(31,33,46,0.45)]" onClick={onClose}>
      <div ref={box} role="dialog" aria-modal="true" aria-label="Publish 3 changes?" onClick={(e) => e.stopPropagation()}>
        <Dialog
          size="md"
          title="Publish 3 changes?"
          confirmLabel="Publish"
          onClose={onClose}
          onCancel={onClose}
          onConfirm={() => { onPublish(); onClose(); }}
        >
          <ChangeList changes={changes} />
          <p>They go to the Recommendations page for everyone who can see this workflow. Nothing changes in your ad accounts until someone applies a recommendation.</p>
        </Dialog>
      </div>
    </div>
  );
}

{open && <PublishDialog changes={changes} onPublish={publish} onClose={() => setOpen(false)} />}

Wire all three handlers. onClose runs from the close icon and onCancel from the Cancel button. Neither closes the dialog by itself.

SizesCopy Anchor Link

Pick the size by what is inside, not by how important the dialog is. The examples below open with the wrapper above.

<Dialog size="sm" title="Rename workbook" confirmLabel="Rename">…</Dialog>
<Dialog size="md" title="Save as a template" confirmLabel="Save template">…</Dialog>
<Dialog size="lg" title="Import from your website" confirmLabel="Read my website">…</Dialog>

The widths are fixed. On a narrow screen, cap them through className, as the workflow review does with max-width: calc(100vw - 32px).

StatesCopy Anchor Link

state sets the rail and icon colour, and the icon: Info, Warning or XCircle. In the error state Confirm turns into a red Button, so a destructive action reads as one.

Open them over the page:

<Dialog size="sm" state="warning" title="Unsaved changes" confirmLabel="Leave">…</Dialog>
<Dialog size="sm" state="error" title="Delete page?" confirmLabel="Delete">…</Dialog>

Use confirmDisabled to grey out Confirm until the form is valid. This is the disabled button Figma draws in its warning and error examples. Use confirmVariant to pick another Button variant.

PropsCopy Anchor Link

Other props (aria-*, id, data-*) are passed to the panel. ref is not forwarded.

AccessibilityCopy Anchor Link

What Dialog gives you:

• The close icon is a <button> with aria-label="Close". The footer actions are product Buttons.

What the wrapper has to add, because Dialog does not:

• role="dialog", aria-modal="true" and a name. The title is a plain <span>, so pass the same text as aria-label on the wrapper.
• Escape to close. The library and workflow screens add their own key listener. The workbook rename dialog has none, so Escape does nothing there.
• Focus. Move focus into the dialog when it opens (the first field, or the first button) and back to the trigger when it closes, as the example does.
• Focus does not stay inside. Tab moves past the last button and on into the page behind the backdrop. None of the current wrappers trap it.

Do and don'tCopy Anchor Link

• Do use Dialog for new confirmations and short forms, inside the wrapper above.
• Do write the title as a question or an action ("Publish 3 changes?", "Rename dashboard") and the Confirm label as the verb.
• Do say in the body what will happen, including what will not change.
• Don't put a long form or a whole workflow in a dialog. Give it a page.
• Don't open a dialog from inside another dialog.
• Do use the error state for a destructive action, so Confirm is red.
• Don't use the warning state just to draw attention. Use it when going ahead loses something, like unsaved edits.