Stat | Surflane

AvailableSemantic HTML / product composition

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Deploy success: 99%; +0.5%; vs. last week

P95 latency: 144 ms; -4.6%; vs. last week

Monthly cost: ₩4.9M; +1.2%; vs. last week

Free disk: 24 GiB; Below 30 GiB

Last scan: 2 h 40 min; Over 2 hours ago

dgx-001: 62 °C

dgx-002: 71 °C

Turns: 48

Tools: 131

Tokens: 1.2M

Usage

Show a key figure on a dashboard: what it measures, its value, how it moved and what it covers. Change takes the change as a number, shows its sign and an arrow, and colors it by direction with the trend tokens. Format values with formatNumber, formatCurrency or formatPercent, so every screen writes numbers the same way.
Group sets values side by side under one label: one measure across items, such as 'GPU temperature' by node, or one item's figures, such as a session's turns, tools and tokens.
size='small' fits a figure beside other content, such as the counts in a card's footer: the value takes the subsection role and the words around it the caption role. About four small values fit a row at the 20rem card minimum.

Don't show direction with color alone. Change keeps the sign and the arrow, so leave them in.
Don't put a long sentence in Caption. Name the period or the comparison, such as 'vs. yesterday's close'.
Don't use Stat for values people need to compare across rows. Use a Table with numeric cells instead.
Don't shrink a figure with a class. Set size='small' on Root or Group, which keeps the type roles.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root(dl) → Label(dt) + Value(dd) + Change(dd) + Status(dd) + Caption(dd); Group(role=group, label) → Root…

Keyboard and accessibility

Stat is static text: a description list in which the label names the value. Nothing enters the Tab order. A link or button you add keeps its own focus.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Stat, formatCurrency } from '@surflane/ui'

<Stat.Root>
  <Stat.Label>Portfolio value</Stat.Label>
  <Stat.Value>
    {formatCurrency(128_450_000, 'KRW', { locale: 'ko-KR' })}
  </Stat.Value>
  <Stat.Change value={0.0123} />
  <Stat.Caption>vs. yesterday's close</Stat.Caption>
</Stat.Root>

Key API

Stat — common wrapper props
Prop	Contract	Default
`Change.value`	number; its sign sets the direction	required
`Change.format`	(value) => ReactNode	signed percentage, such as +1.2%
`Change.direction`	up \| down \| flat	from the sign
`Change.lowerIsBetter`	swaps the colors for measures where a fall is good	false
`Status.tone`	the value's state against a threshold, with text that says why, such as 'Below 30 GiB'. caution and danger color the value too	required
`Root.size`	small \| default \| large: small sets the value in the subsection role, for a figure beside other content. Like every part's size, each also sizes the controls inside	default
`Group.label`	what the values describe, shown above them and naming the group: one measure across items, with each Stat.Label naming an item, or one item's figures, with each Stat.Label naming a figure	required
`Group.size`	small \| default \| large: small sets every value in the group as Root.size does	default
`Group.labelHidden`	names the group without showing the label, where a panel title above already says it; give it a name of its own, such as "Free disk by node"	false
`Root / Label / Value / Caption`	native dl, dt and dd props	—

The table lists the common wrapper's main props. See the package type declarations for the full types.