Alert

Use Alert

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Alert tone="warning" title="Storage is almost full">
        Free some space before your next upload.
      </Alert>
    </FloodRoot>
  );
}

Design notes

• announcement defaults off: a static message does not automatically interrupt a screen reader. Polite uses role=status; assertive uses role=alert.
• Use assertive for newly inserted urgent messages, and verify with actual assistive technology. No focus movement, timeout or automatic dismissal is implemented.
• Title is optional. Icons are original decorative glyphs; pass icon={null} to omit or supply noninteractive artwork. Meaning must remain in the text.
• Native div props and ref target the message root. Available in 0.2.4.

API reference