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
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Title of the metric or label displayed at the top. |
| value | string | number | - | Main value or statistic to display prominently. |
| icon | React.ElementType | - | Optional icon to display at the top of the metric box. |
| subtext | string | - | Small helper or context text shown below the value. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Theme color variant. |
| state | "success" | "error" | "warning" | - | State color for additional meaning. |
| align | "left" | "center" | "right" | "center" | Text alignment of the metric box content. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Size of the metric box. |
| outline | boolean | false | If true, renders an outlined variant. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for the card. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow depth for the card. |
| className | string | - | Custom CSS class for the metric box. |
| data-testid | string | "metric-box" | Test id for querying the component in tests. |