Stat·component·@astryxdesign/labExperimental

Stat

A KPI/metric display for dashboards and summary rows: metric name, large tabular-nums value, an optional sentiment-aware delta, a supporting description, and a media slot for a sparkline or mini chart. Compose several in a Grid for a KPI row.

@astryxdesign/lab

Usage

Pass pre-formatted strings for value and delta ("1.2M", "+12.4%"); Stat does not format numbers.
Set sentiment explicitly for inverted metrics where down is good, like error rate or latency.
Wrap Stat in a Card and lay out KPI rows with Grid columns={{minWidth: 240, max: 4}}.
Put a full-size chart in the media slot; it is meant for compact sparklines or trend glyphs.
Rely on delta color alone to convey meaning; the direction glyph and screen-reader text carry it too.

Typed props

Prop	Type and behavior
`label`	`string` · required Metric name shown above the value, e.g. "Total requests".
`value`	`ReactNode` · required Headline metric rendered large with tabular numerals. Pass a pre-formatted string like "1.2M".
`delta`	`{value: string, direction: 'up' \| 'down' \| 'flat', sentiment?: 'positive' \| 'negative' \| 'neutral'}` Change indicator next to the value: an up/down/flat glyph plus colored text. sentiment overrides the direction color mapping (up=positive, down=negative, flat=neutral) for inverted metrics like error rate.
`description`	`string` Muted supporting line under the value, e.g. "vs. previous 30 days".
`media`	`ReactNode` Trend slot rendered below the text content, e.g. a sparkline or mini chart. Stat does not render a chart itself.
`size`	`'sm' \| 'md' \| 'lg'` · default 'md' Size variant controlling the value's font size.
`xstyle`	`StyleXStyles` StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

Theming

Targets

astryx-stat

Visual props: size