StatusIndicator

Use StatusIndicator

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <StatusIndicator tone="success" label="All systems operational" />
    </FloodRoot>
  );
}

Design notes

• The visible label carries meaning; the dot is decorative and color is never the only signal. Use announce to opt into a polite status live region for changing messages.
• Static labels do not announce by default. Tone is independent of wording and size. Use Badge for categorical labels and Alert for a message requiring more explanation.
• Compatible addition in 0.2.5. Uses existing Flood semantic tokens and relative geometry.

API reference