Metric
Displays a label and prominent formatted value for dashboard KPIs, with optional sentiment coloring.
Installation
tsx
import { Metric } from "madagent";Default
Total users12,847
Sentiments
Net change this month$3,356,238.64
Money in$4,033,206.02
Money out-$676,967.38
Sizes
Small$1,234.56
Medium (default)$1,234.56
Large$1,234.56
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | - | Descriptive text above the value |
value* | ReactNode | - | The prominent metric value — string or formatted JSX |
sentiment | "positive""negative""neutral" | "neutral" | Controls the value color |
size | "sm""md""lg" | "md" | Controls the value font size |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
الإيرادات$3,356,238.64
المصروفات-$676,967.38
المستخدمون12,847
Usage
tsx
<div style={{ display: "flex", gap: "3rem" }}>
<Metric label="الإيرادات" value="$3,356,238.64" sentiment="positive" />
<Metric label="المصروفات" value="-$676,967.38" sentiment="negative" />
<Metric label="المستخدمون" value="12,847" />
</div>