A metric delta badge with trend arrows for dashboards, stat rows, and pricing tables.
The import and the props worth knowing about, in one place.
import { Badge9 } from "@/components/beste/component/badge9";
<Badge9 value="+12.4%" label="vs last month" />
<Badge9
value="-3.2%"
tone="down" // "up" (default) | "down" | "flat"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | The delta value (e.g. "+12.4%") |
label | string | — | Optional muted context after the chip (e.g. "vs last month") |
tone | "up" | "down" | "flat" | — | Trend direction, controls the arrow and colors |
className | string | — | Additional classes merged onto the root |