Stat

Interactive

See Stat in Storybook for every variant, with live controls.

A single headline metric, with an optional change and inline trend.

import { Stat } from "@kairosis/eidos";

<Stat
  label="Runs today"
  value="1,284"
  icon="play"
  delta="+12% vs last week"
  deltaTone="positive"
  trend={[12, 18, 14, 22, 27, 36]}
/>;

Props

Prop	Type	Default	Description
`label`	`ReactNode`	—	Required. Uppercase mono meta-label
`value`	`ReactNode`	—	Required. The figure, always mono
`delta`	`ReactNode`	—	Change copy, e.g. "+12% vs last week"
`deltaTone`	`"neutral" \| "positive" \| "negative"`	`"neutral"`	Colours the delta
`trend`	`number[]`	—	Renders an inline `Sparkline`
`trendColor`	`string`	`var(--primary)`
`icon`	`IconName`	—	Small glyph before the label

Guidelines

deltaTone is about good/bad, not up/down. A rising failure rate is negative even though the number went up — pass the tone deliberately rather than deriving it from the sign.
Write the delta with its comparison baked in ("+12% vs last week"); a number with no baseline means nothing.
value is mono with tabular figures, so it doesn't jitter as it updates.
Pre-format value — Stat doesn't do locale or unit formatting.
Write label in sentence case; CSS uppercases it.

Props​

Guidelines​

Props

Guidelines