A label over a large value, for dashboards and summary rows — with an optional prefix (a currency sign) and suffix (a unit) around the value.
A label over a large value, for dashboards and summary rows — with an optional prefix (a currency sign) and suffix (a unit) around the value.
Usage
1import { Stat } from '@behivetech/atoms.stat';23<Stat label="Total pages" value={42} />4<Stat label="Revenue" value={1200} prefix="$" />5<Stat label="Uptime" value={99.9} suffix="%" />
Examples
Open all 4 →Basic Stat
1const BasicStat = () => <Stat label="Total Pages" value={42} />;23render(<BasicStat />);
Stat With Prefix
1const StatWithPrefix = () => (2 <Stat label="Revenue" value={1200} prefix="$" />3);45render(<StatWithPrefix />);
Properties
Stat props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Descriptive label shown above the value |
value* | string | number | — | The primary metric to display |
className | string | — | Additional class names to merge with the component root element |
prefix | ReactNode | — | Optional prefix rendered before the value (e.g. "$") |
suffix | ReactNode | — | Optional suffix rendered after the value (e.g. "%", "ms") |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).