ExperimentalmoleculeData

StatBox

One number with its label and an optional explanation, for dashboards and profiles.

import { … } from "@brdgapp/ui/components/stat-box"

Usage

StatBox shows one number with its label: contacts, intros, accepted. Several sit in a grid on Outcomes and on profiles. It can explain itself with an ⓘ, show a small third line (a percentage), or link into the full list. The usual mistake is a number that disagrees with the list it counts.

When to use

A row of headline numbers on a dashboard or profile.

When not to use

For a number inside a sentence. Write it in the text.
For a trend over time. Use a chart (Metrics and explainers).

Anatomy

1,284Contacts

38Accepted83%

Box. --surface-secondary, 12px corners (small-card radius), 16 × 12px padding.
Number. 22px Bold, tabular-nums.
Label. 12px SemiBold, with an optional ⓘ.
Third line. Optional, 11px muted: "72%", "rated great".

Examples

A row of stats

Loads through the demo controls; the skeletons are the same size.

States

	Rest	Hover	Focus	Loading
Plain	46Intros this year	46Intros this year	46Intros this year
Link	46Intros this year	46Intros this year	46Intros this year

State	What happens
Loading	StatBoxSkeleton, the same size.
Link	With `href` or `render`: a chevron, a hover fill, the number turns blue on hover.

Behavior

Numbers go through formatCount: in full with a comma under 10,000 (1,284), then 12.5K, 1.3M. Pass display for anything else, such as money from formatMoney.
A linking box hides its ⓘ (a link can't contain another control).

Do and don't

Count from the same list the linked page shows.

Don't

Show a number from a separate count that can disagree.

Show the skeleton while loading.

Don't

Show 0 while loading, or when the count failed.

Content

Labels are short nouns: "Contacts", "Intros this year".

Accessibility

The ⓘ is reachable by keyboard and its text is read by screen readers.

Keys	Action
`TabEnter`	Reach and open a linking box.

API reference

StatBox

One number.

Prop	Type	Default	Description
`label`	`string`	—	What it counts.
`value`	`number`	—	The number.
`sub`	`string`	—	A muted third line.
`display`	`string`	—	A ready-made value, such as money from `formatMoney` ("$12.5K").
`info`	`string`	—	An ⓘ explaining it. New in the package.
`href`	`string`	—	Makes it a link.
`render`	`ReactElement`	—	Your router's link.

StatBoxSkeleton

The loading box.

Prop	Type	Default	Description

Lineage

What it's built from and where it's used, read from the code. When you change it, check these too.

Built from: InfoHint, HoverTip and Tip
Used by components: None
Used in patterns: Loading, empty and error Metrics and explainers
Used in templates: Card dashboard

Known gaps

Where the code still differs from the system. Follow the system, not the gap.

Bridge OS's StatBox links with Next.js Link automatically; in the package, pass render={<Link …/>}.

Sources

Bridge OS src/components/ui/stat-box.tsx; Outcomes stat cards.
Pattern: Metrics and explainers (proposal approved 2026-11-02).