MetricCard

Compact card displaying a labelled metric value with optional highlight and transparency states.

import { MetricCard } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`label`	Required	`string`	—	—
`unit`	Required	`string`	—	—
`value`	Required	`string \| number \| null`	—	—
`bgColor`	Required	`string \| undefined`	—	—
`className`	Required	`string \| undefined`	—	—
`noMinWidth`	Required	`boolean \| undefined`	—	—
`isValueMedium`	Required	`boolean \| undefined`	—	—
`isHighlighted`	Required	`boolean \| undefined`	—	—
`showDashForZero`	Required	`boolean \| undefined`	—	—
`isTransparentColor`	Required	`boolean \| undefined`	—	—

Usage

Compact card displaying a labelled metric value with an optional unit suffix. Supports highlighted (orange accent) and transparent-colour display states, making it suitable for pool-performance dashboards, financial summary rows, and inline KPI strips where visual weight needs to be controlled.

Notes

When value is null the component renders the FALLBACK placeholder (—) from @primitives.
showDashForZero and null values both render the same FALLBACK string.
isHighlighted takes precedence over isTransparentColor for colour resolution.
The background colour is applied via a --mdk-metric-card-bg CSS custom property, allowing it to be overridden at the @layer app level.

Example

/** * Runnable example for MetricCard. */import { MetricCard } from '@tetherto/mdk-react-devkit'export const MetricCardExample = () => (  <div className="mdk-example-row">    <MetricCard label="Hashrate" unit="TH/s" value={102.4} />    <MetricCard label="Power" unit="W" value={3200} isHighlighted />    <MetricCard label="Efficiency" unit="J/TH" value={31.2} isValueMedium />    <MetricCard label="Revenue" unit="USD" value={0} showDashForZero />    <MetricCard label="Temperature" unit="°C" value={null} />  </div>)