Stat

Displays a prominent label-value summary with optional change, context, and icon.

Examples

Default

Revenue

$1.2M

<Stat label="Revenue" value="$1.2M" />

With Description

Revenue

$1.2MReporting period ending June 30

<Stat
  label="Revenue"
  value="$1.2M"
  description="Reporting period ending June 30"
/>

With Icon

Revenue

$1.2M

<Stat label="Revenue" value="$1.2M" icon={CircleDollarSign} />

With Label Tooltip

Cloud Build cost

Uses Cloud Build default-pool list prices and execution time. Shared free tier may reduce this value; logging, storage, and network are excluded.

$42.18

<Stat
  label="Cloud Build cost"
  value="$42.18"
  labelTooltip="Uses Cloud Build default-pool list prices and execution time. Shared free tier may reduce this value; logging, storage, and network are excluded."
/>

With Change

Revenue

$1.2M12.5% increased

<Stat label="Revenue" value="$1.2M" change={12.5} />

With Proportional Numbers

P90 CI time

12m 11s

<Stat label="P90 CI time" value="12m 11s" hasTabularNumbers={false} />

Inverted Change

Churn rate

2.1%3.4% decreasedLower is better

<Stat
  label="Churn rate"
  value="2.1%"
  change={-3.4}
  changeSentiment="inverted"
  description="Lower is better"
/>

Custom Change Text

Customers

8,429+340 this month

<Stat
  label="Customers"
  value="8,429"
  change={340}
  formatChange={change => `+${change}`}
  increaseLabel="this month"
/>

Dashboard

Revenue

$1.2M12.5% increasedYear to date

Customers

8,4298.2% increasedActive accounts

Orders

1,2843.4% decreasedThis month

Conversion

4.8%0% unchangedLast 30 days

<div className={dashboardGrid}>
  <Card padding={4}>
    <Stat
      change={12.5}
      description="Year to date"
      icon={CircleDollarSign}
      label="Revenue"
      value="$1.2M"
    />
  </Card>
  <Card padding={4}>
    <Stat
      change={8.2}
      description="Active accounts"
      icon={Users}
      label="Customers"
      value="8,429"
    />
  </Card>
  <Card padding={4}>
    <Stat
      change={-3.4}
      description="This month"
      icon={ShoppingCart}
      label="Orders"
      value="1,284"
    />
  </Card>
  <Card padding={4}>
    <Stat
      change={0}
      description="Last 30 days"
      icon={Percent}
      label="Conversion"
      value="4.8%"
    />
  </Card>
</div>

API

Stat

Displays a prominent label-value summary with optional change, context, and icon.

Prop	Type	Default	Description
change	number	—	Percentage change. Positive values indicate an increase and negative values indicate a decrease. Non-finite values (NaN, Infinity) are not rendered.
changeSentiment	"auto" | "neutral" | "inverted"	—	How the change maps to a positive or negative tone. Use inverted for metrics where a decrease is an improvement (for example churn or costs) and neutral to avoid signaling either way.
data-testid	string	—	Test ID applied to the root element.
decreaseLabel	string	—	Label rendered after the formatted change when it is a decrease.
description	ReactNode	—	Optional supporting context rendered below the value.
formatChange	(change: number) => string	—	Formats the change for display. Receives the signed change and defaults to a locale-formatted absolute percentage, for example 12.5%.
hasTabularNumbers	boolean	true	Whether to use tabular (monospaced) number figures for the value and change.
icon	IconComponent	—	Optional decorative icon rendered beside the statistic.
increaseLabel	string	—	Label rendered after the formatted change when it is an increase.
label*	ReactNode	—	Descriptive label for the statistic.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
unchangedLabel	string	—	Label rendered after the formatted change when it is zero.
value*	ReactNode	—	Prominent statistic value.