AlertDialog

Use AlertDialog

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <AlertDialog title="Archive this project?" description="You can restore it from the archive." confirmLabel="Archive project" trigger={props => <Button {...props}>Archive project</Button>} onConfirm={() => { /* Archive in the host application. */ }} />
    </FloodRoot>
  );
}

Design notes

• Uses the original Flood Dialog modal layer with role=alertdialog, a required message and initial focus on Cancel. Tab stays inside the modal; Escape cancels and restores trigger focus. Outside clicks do not dismiss it. There is no extra close action competing with the explicit Cancel button.
• onConfirm is a host callback followed by a close request. onCancel handles the Cancel button and Escape, not confirmation. Use open/onOpenChange for host-controlled state and confirmDisabled to prevent confirmation while unavailable. Async work/errors belong to the host; callbacks are not awaited.
• Translate title, description, confirmLabel and cancelLabel. Use ordinary Dialog for forms and exploratory content. Available in 0.2.5.

API reference