Badge

Use Badge

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Badge tone="success">Active</Badge>
    </FloodRoot>
  );
}

Design notes

• Use text to communicate status; color is supplementary.
• Tone, size and visual variant are independent. This is not a selectable or removable chip.
• Available in 0.2.4. Use FloodRoot for the neutral dark recipe.

API reference