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" />

Visual variants

Themes

primary

Users Online

1,234

secondary

Users Online

1,234

tertiary

Users Online

1,234

quaternary

Users Online

1,234

States

success

Users Online

1,234

warning

Users Online

1,234

error

Users Online

1,234

info

Users Online

1,234

Sizes

Users Online

1,234

small

Users Online

1,234

medium

Users Online

1,234

large

Users Online

1,234

Variants

solid

Users Online

1,234

outline

Users Online

1,234

glass

Users Online

1,234

Rounding

none

Users Online

1,234

medium

Users Online

1,234

large

Users Online

1,234

Shadows

none

Users Online

1,234

light

Users Online

1,234

strong

Users Online

1,234

visual-variants.tsx

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

// States
<MetricBox state="success" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />
<MetricBox state="warning" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />
<MetricBox state="error" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />
<MetricBox state="info" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />

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

// Variants
<MetricBox variant="solid" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />
<MetricBox variant="outline" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />
<MetricBox variant="glass" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />

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

// Shadows
<MetricBox shadow="none" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />
<MetricBox shadow="light" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />
<MetricBox shadow="strong" title="Users Online" value="1,234" theme="primary" align="center" size="medium" />

Interaction states

interaction-states.tsx

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

Props API

Metric Box props API
				Default	Description
`align`	`AlignmentType`	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.
`icon`	`IconComponent`	No	props	`—`	Optional SVG icon to visually represent the metric.
`iconAriaLabel`	`string`	No	props	`—`	Accessible label for the icon when it is not decorative.