KpiStat

$1,284,500+$94,500vs previous quarter

KpiStat shows one important number, big, with an optional comparison that renders as a trend badge (up is good by default).

Usage

import { KpiStat } from "@sina-design-system/core";

<KpiStat
  value={12500}
  comparisonValue={11800}
  valueFormatter={(v) => `$${v.toLocaleString("en-US")}`}
  comparisonLabel="vs last month"
/>

Examples

Trend directions

12500+700vs last month

rising · good

9400-2400vs last month

falling · bad

11800No changevs last month

no change

Formatted value

$1,284,500+$94,500vs previous quarter

Percentage delta · inverted colors

12500+5.9%vs last month

percentage

340-180incidents vs last month

inverted · falling reads good

140No prior data

no baseline

Sizes & null value

42+4

—

null value

Props

Prop	Type	Default	Description
`value`	`number \| null`	—	The headline figure; null renders displayNullAs.
`valueFormatter`	`(value: number) => string`	—	Formats the value and the delta (currency etc.).
`comparisonValue`	`number`	—	A prior value. Renders the trend pill.
`comparisonLabel`	`string`	—	Context under the pill, e.g. “vs previous period”.
`showChangeAsPercentage`	`boolean`	`false`	Show the delta as a percentage.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tile scale.
`invertChangeColors`	`boolean`	`false`	When down is good (e.g. spending).

Accessibility

A falling trend uses a danger badge with a bold down-glyph, so meaning never rests on color alone. Everything is real text (no image, no canvas), and it's server-mountable (no client JS).