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.
Examples of v0.4.4 are shown as code; only the latest version runs live. Open the live examples →
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 />);
Stat With Suffix
1const StatWithSuffix = () => (2 <Stat label="Uptime" value={99.9} suffix="%" />3);45render(<StatWithSuffix />);
Stat With Prefix And Suffix
1const StatWithPrefixAndSuffix = () => (2 <Stat label="Response Time" value={120} suffix="ms" />3);45render(<StatWithPrefixAndSuffix />);