Metric Card
Card surfacing a numeric metric with label and icon
Overview
Metric Card displays a single numeric value alongside a descriptive label and icon, useful for surfacing key statistics on dashboards and summary views.
Usage
Import the component:
tsx
import { MetricCard } from "@eqtylab/equality";Basic usage with required properties:
tsx
<MetricCard label="Total" value={100} />Variants
Metric Card ships with five color variants to communicate status. default is used for neutral metrics.
Default
Primary
Success
Warning
Danger
Usage
tsx
<MetricCard label="Total" value={100} icon="Layers" />
<MetricCard label="Total" value={80} variant="primary" icon="Layers" />
<MetricCard label="Success" value={20} variant="success" icon="CheckCircle2" />
<MetricCard label="Pending" value={45} variant="warning" icon="Clock" />
<MetricCard label="Failure" value={80} variant="danger" icon="AlertTriangle" />Without an Icon
The icon prop is optional. Use it only when a descriptive icon makes sense to display.
tsx
<MetricCard label="Total" value={100} />Elevations
Use the elevation prop with the ELEVATION constant to place the card on the elevation scale. raised is the default.
Sunken
Base
Raised (default)
Overlay
Usage
tsx
import { MetricCard, ELEVATION } from "@eqtylab/equality";
<MetricCard
label="Total"
value={100}
icon="Layers"
elevation={ELEVATION.SUNKEN}
/>;Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
value | The numeric or text value to display prominently on the card. | string, number | — | ✅ |
label | Descriptive label shown beneath the value. | string | — | ✅ |
icon | Icon to display. Can be a Lucide icon name or a custom React element. | string, ReactElement | — | ❌ |
variant | The visual style variant that communicates the metric’s status or tone. | default, primary, danger, success, warning | default | ❌ |
elevation | Position on the elevation scale. Use the ELEVATION constant. | sunken, base, raised, overlay | raised | ❌ |