Metric Box
The Metric Box component displays key metrics in a card-style component, supporting content like icons and subtext.
Usage
Default
Users Online
1,234
<MetricBox title="Users Online" value="1,234" theme="primary" align="center" size="medium" />Props
| Type | Description | |
|---|---|---|
| align | "left" | "right" | "center" | Text alignment for content. One of: "left" | "center" | "right" |
| aria-atomic | boolean | Whether assistive tech should present the live region as a whole. |
| aria-describedby | string | Custom accessible description reference for the whole metric box. Overrides the internal subtext description when provided. |
| aria-label | string | Custom accessible label for the whole metric box. Use when the title/value pairing needs a more descriptive spoken label. |
| aria-labelledby | string | Custom accessible label reference for the whole metric box. Overrides the internal title-based labelling when provided. |
| aria-live | "off" | "polite" | "assertive" | Live region setting for announcing metric value updates. Useful for dynamic dashboards. |
| className | string | Optional additional CSS class names for custom styling. |
| data-testid | string | Optional test ID for testing frameworks. |
| decorativeIcon | boolean | Whether the icon is decorative. Defaults to true. |
| icon | IconType | Optional icon to visually represent the metric (from react-icons, for example). |
| iconAriaLabel | string | Accessible label for the icon when it is not decorative. |
| outline | boolean | Optional outline style for the component (default: false). |
| role | React.AriaRole | Accessible role for the wrapper. Defaults to "region" when a title is present. |
| rounding | RoundingType | Rounding style for the component. One of: "none" | "small" | "medium" | "large" | "full" |
| shadow | ShadowType | Shadow style for the component. One of: "none" | "light" | "medium" | "strong" | "intense" |
| size | SizeType | Size of the component. One of: "xs" | "small" | "medium" | "large" | "xl" |
| state | StateType | State of the metric. One of: "success" | "error" | "warning" | "disabled" | "" |
| subtext | string | Optional subtext providing additional context for the metric. |
| theme | ThemeType | Theme to apply for styling. One of: "primary" | "secondary" | "tertiary" | "quaternary" | "clear" |
| title | string | Title of the metric. |
| value | string | number | The primary value of the metric, e.g., a number or a string. |