Stat

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

Displays a large metric with optional trend indicator and help text.

Import

import { Stat, statTileHeight } from "~lib/data-display/stat";

Props

Name	Type	Required	Default	Description
`label`	`string`	Yes	N/A	Metric label
`value`	`string \| number`	Yes	N/A	Main display value
`change`	`{ value: number; trend: "up" \| "down" \| "neutral" }`	No	N/A	Trend indicator
`helpText`	`string`	No	N/A	Explanatory text below
`leading`	`ReactNode`	No	N/A	Drawn before the tile, centered on the value's line
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Text size of the tile
`align`	`"left" \| "center" \| "right"`	No	Inherited	Text alignment
`truncate`	`boolean`	No	`false`	Keep each line to one, ending in "…"

Examples

Truncated

With truncate, a label or value too long for the tile ends in "…" rather than wrapping, so tiles in a row stay the same height.

Ouvrir Truncated dans Storybook

With Leading

A node such as a coin's Avatar crest sits before the tile's lines, centered on the value. The node and the lines are aligned as one block, so a centered tile centers the pair.

Ouvrir With Leading dans Storybook

Height

statTileHeight(size, { change, helpText }) returns how tall a tile with every line kept to one is, in pixels, on the frame's own type scale, so a plan can budget a row of tiles. See StatGroup.

Import​

Props​

Examples​

Simple​

With Up Trend​

With Down Trend​

With Help Text​

Sizes​

Centered​

Truncated​

With Leading​

Height​

See Also​

Import

Props

Examples

Simple

With Up Trend

With Down Trend

With Help Text

Sizes

Centered

Truncated

With Leading

Height

See Also