Components / data-display

Stat

A single headline number with its label and, optionally, a trend.

import { Stat } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Stat } from '@basiiik/ui';

<Stat label="Active members" value="12,480" />

• Example values were filled in for the required props label, value: replace them with your own.
• Stat has no interactive states. The trend colour follows the direction: up is success, down is danger, flat is secondary.
• Storybook: Data display/Stat.

Props

Other props

States. Stat has no interactive states. The trend colour follows the direction: up is success, down is danger, flat is secondary.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• A few key numbers at the top of a dashboard or list page
• One metric with its change since the last period

Do not use it when

• A table of many values (use Table)
• A status or count next to another element (use Badge)
• Progress towards a goal (use Progress)
• A chart or trend line over time (not part of the library yet)

Rules for agents

• Give every Stat a short label and the value already formatted ("12,480", "$4.2k"); the component does not format numbers
• Pass delta with its sign ("+12.4%", "-3") and trend for the direction; a trend without a delta or context shows nothing
• Colour follows direction: up is green and down is red, even for a metric where down is good (cost, errors); say what is good in the label or context instead of recolouring
• Put Stats of the same size side by side in a grid or flex row; use size="sm" when four or more share a row
• Do not use a Stat for a status or category (use Badge) or a list of values (use Table)

Avoid

• Colour as the only direction signal (no sign, no arrow)
• A click handler on the Stat itself (wrap it in a link or button)
• Long text in the value ("12,480 active members this month")
• Mixed sizes in one row
• Hand-building a metric tile from a Card, a heading and a paragraph

Writing the content

• Label: a noun phrase in sentence case, two or three words: "Active members"
• Value: the number alone, with a unit symbol if needed: "$4.2k", "98%"
• Context: what the change is compared with: "vs last month"

Accessibility

• The group is named by its label, so a screen reader hears "Active members, group" and then the value
• The direction is spoken in words ("Up +12.4%"), so it is not carried by colour or the arrow alone; translate it with trendLabel
• The arrow is decorative (aria-hidden)

Colour tokens it reads

Related

• Card
• Badge
• Progress
• Table

data-display 8 Figma variants Try it in the live demo