Metric Box

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

Usage & Examples

1,234

default.tsx

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

Metric Box props API
				Default	Description
`align`	`"left" \| "right" \| "center"`	No	props	`"center"`	Text alignment for content. One of: "left" \| "center" \| "right"
`aria-atomic`	`boolean`	No	aria	`—`	Whether assistive tech should present the live region as a whole.
`aria-describedby`	`string`	No	aria	`—`	Custom accessible description reference for the whole metric box. Overrides the internal subtext description when provided.
`aria-label`	`string`	No	aria	`—`	Custom accessible label for the whole metric box. Use when the title/value pairing needs a more descriptive spoken label.
`aria-labelledby`	`string`	No	aria	`—`	Custom accessible label reference for the whole metric box. Overrides the internal title-based labelling when provided.
`aria-live`	`"off" \| "polite" \| "assertive"`	No	aria	`—`	Live region setting for announcing metric value updates. Useful for dynamic dashboards.
`className`	`string`	No	styling	`—`	Optional additional CSS class names for custom styling.
`contentClassName`	`string`	No	props	`—`	Additional class names for the content wrapper.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`decorativeIcon`	`boolean`	No	props	`true`	Whether the icon is decorative. Defaults to true.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Applies a translucent frosted-glass treatment using the active theme palette.
`icon`	`IconType`	No	props	`—`	Optional icon to visually represent the metric (from react-icons, for example).