---
title: "Metric Card"
description: "Card surfacing a numeric metric with label and icon"
source: "Equality"
---
import { MetricCard, ELEVATION } from "@eqtylab/equality";

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

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

### Primary

<MetricCard label="Total" value={80} variant="primary" icon="Layers" />

### Success

<MetricCard label="Success" value={20} variant="success" icon="CheckCircle2" />

### Warning

<MetricCard label="Pending" value={45} variant="warning" icon="Clock" />

### Danger

<MetricCard label="Failure" value={80} variant="danger" icon="AlertTriangle" />

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

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

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

<MetricCard
  label="Total"
  value={100}
  icon="Layers"
  elevation={ELEVATION.SUNKEN}
/>

### Base

<MetricCard
  label="Total"
  value={100}
  icon="Layers"
  elevation={ELEVATION.BASE}
/>

### Raised (default)

<MetricCard
  label="Total"
  value={100}
  icon="Layers"
  elevation={ELEVATION.RAISED}
/>

### Overlay

<MetricCard
  label="Total"
  value={100}
  icon="Layers"
  elevation={ELEVATION.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`  | ❌       |