Dialog

Use Dialog

Dialog is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Dialog, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Dialog title="Create a project" trigger={trigger => <Button {...trigger}>Open dialog</Button>}>Project details.</Dialog>
    </FloodRoot>
  );
}

Design notes

• Uses native showModal, not a simulated modal div.
• Escape closes the top layer; outside closing can be disabled independently. Tab remains inside the dialog.
• Closed content unmounts. Forward trigger props/ref; initialFocusRef can select a safe initial control. Modern native dialog support is required.

API reference