Metric

Use Metric

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Metric label="Monthly revenue" value="$24,580" trend={{direction:"up",label:"12.8% higher",tone:"success"}} hint="Compared with the previous month." />
    </FloodRoot>
  );
}

Design notes

• Native definition-list semantics associate the label with its value, trend and hint. Values may be rich content; the host owns currency, number and locale formatting.
• Trend direction and semantic tone are independent: a decreasing failure rate can be good. Its label must communicate the change without relying on the decorative arrow or color. No automatic percentage calculation is performed.
• Compatible addition in 0.2.5. Uses existing Flood semantic tokens and relative geometry.

API reference