Patterns
Metric Bar
A labelled row with a thin proportion bar for 'top N' breakdowns — spend by provider, usage by category, storage by bucket. Icon/dot, label, value, colored bar.
A labelled row with a thin horizontal proportion bar — for "top N" breakdowns like spend-by-provider, usage-by-category, or storage-by-bucket. A leading icon (or a color dot), a label, a right-aligned value, and a colored bar. The host supplies the color and any icon.
Import
import { MetricBar } from "@yuhuanowo/yunui/patterns";
Example
percentage (0–100) fills the bar; color tints both the bar and the dot shown when there's no icon. value is right-aligned.
MetricBar
OpenAI4,820 credits
Anthropic3,140 credits
Google1,090 credits
Mistral410 credits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| color | string | — | CSS color for the bar fill (and the dot when there's no icon). |
| icon | ReactNode | — | Leading icon; when omitted a small color dot (using `color`) is shown. |
| label* | ReactNode | — | |
| percentage* | number | — | Bar fill, 0–100. |
| value | ReactNode | — | Right-aligned value (e.g. "120 credits"). |