# AlertDialog

A focused confirmation with explicit cancel and continue actions.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `title` | `string` | `Required` |
| `trigger` | `(props: OverlayTriggerProps) => ReactNode` | `Required` |
| `open` | `boolean` | `—` |
| `defaultOpen` | `boolean` | `false` |
| `onOpenChange` | `(open: boolean) => void` | `—` |
| `disabled` | `boolean` | `—` |
| `description` | `string` | `Required` |
| `confirmLabel` | `string` | `"Continue"` |
| `cancelLabel` | `string` | `"Cancel"` |
| `confirmDisabled` | `boolean` | `false` |
| `onConfirm` | `() => void` | `Required` |
| `onCancel` | `() => void` | `—` |
| `Native HTML props` | `Omit<Omit<HTMLAttributes<HTMLDialogElement>, "children" \| "title" \| "role">, "children" \| "role" \| "description" \| "closeLabel" \| "closeOnOutsideClick" \| "initialFocusRef">` | `Forwarded` |