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:

import { MetricCard } from "@eqtylab/equality";

Basic usage with required properties:

<MetricCard label="Total" value={100} />

Variants

Metric Card ships with five color variants to communicate status. default is used for neutral metrics.

Default

100

Total

Primary

Total

Success

Warning

Pending

Danger

Failure

Usage

<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.

100

Total

<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

100

Total

Base

100

Total

Raised (default)

100

Total

Overlay

100

Total

Usage

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`	❌