Metric Box

The Metric Box component displays key metrics in a card-style component, supporting content like icons and subtext.

Usage & Examples

Default

Users Online

1,234
default.tsx
<MetricBox title="Users Online" value="1,234" theme="primary" align="center" size="medium" />

Props API

29 props
Columns
Metric Box props API
Default
Description
alignAlignmentTypeNoprops"center"Text alignment for content. One of: "left" | "center" | "right"
aria-atomicbooleanNoaria—Whether assistive tech should present the live region as a whole.
aria-describedbystringNoaria—Custom accessible description reference for the whole metric box. Overrides the internal subtext description when provided.
aria-labelstringNoaria—Custom accessible label for the whole metric box. Use when the title/value pairing needs a more descriptive spoken label.
aria-labelledbystringNoaria—Custom accessible label reference for the whole metric box. Overrides the internal title-based labelling when provided.
aria-live"off" | "polite" | "assertive"Noaria—Live region setting for announcing metric value updates. Useful for dynamic dashboards.
classNamestringNostyling—Optional additional CSS class names for custom styling.
contentClassNamestringNoprops—Additional class names for the content wrapper.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
decorativeIconbooleanNopropstrueWhether the icon is decorative. Defaults to true.
iconIconComponentNoprops—Optional SVG icon to visually represent the metric.
iconAriaLabelstringNoprops—Accessible label for the icon when it is not decorative.