Stat

Status: Experimental

Stat presents one application-formatted value, its label, and optional change or context. It uses structural dividers and typography rather than turning every metric into a decorative card.

Preview

Active customers

112

Up 8 this monthFrom 128 total records

Open balance

$42,840

Down 4.2%Compared with last month

Needs review

7

2 overdueAcross all workspaces

Usage

---
import { Stat } from '@freight-px/frasto';
---

<Stat
  label="Active customers"
  value="112"
  change="Up 8 this month"
  changeTone="positive"
  description="From 128 total records"
/>

API

Prop	Type	Default	Purpose
label	string	required	identifies the metric
value	string	required	application-formatted primary value
change	string	—	visible change or trend text
changeTone	"neutral" | "positive" | "warning" | "danger" | "info"	"neutral"	semantic treatment selected by the application
description	string	—	period, comparison, or supporting context
class	string	—	styles the root description list
valueClass	string	—	styles the primary value

The optional visual slot accepts a small supplementary visualization. Decorative visuals must be hidden from assistive technology; informative visuals need an accessible summary that repeats their meaning in text.

Responsibilities and accessibility

Stat owns description-list semantics, text hierarchy, tabular numerals, compact spacing, and wrapping. The application formats currency, percentages, units, dates, and localization before rendering. It also decides whether a change is positive or risky in its domain.

Trend meaning must be written in change; do not rely on color or an unexplained arrow. Change and description occupy consistent stacked rows, so short copy does not alter alignment. Group multiple Stats in an application-owned responsive grid with shared spacing. Long values and localized context wrap without clipping.