Components / Display & Media / Stat

Stat beta

One number, its name, and which way it moved. Tabular figures, quiet deltas.

Preview

Active users

8,412

↑ 12.4% vs last week

Exports

1,204

↓ 3.1% vs last week

Uptime

99.98%

↑ 0.02 pt vs last week

<div style="width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;max-width:520px">
  <div class="k-stat"><div class="k-stat-lbl">Active users</div><div class="k-stat-val">8,412</div><span class="k-stat-delta">↑ 12.4% vs last week</span></div>
  <div class="k-stat"><div class="k-stat-lbl">Exports</div><div class="k-stat-val">1,204</div><span class="k-stat-delta" data-dir="down">↓ 3.1% vs last week</span></div>
  <div class="k-stat"><div class="k-stat-lbl">Uptime</div><div class="k-stat-val">99.98%</div><span class="k-stat-delta">↑ 0.02 pt vs last week</span></div>
</div>

/* KATA Stat */
.k-stat{font-family:var(--k-font);min-width:0}
.k-stat .k-stat-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink-3)}
.k-stat .k-stat-val{margin-top:5px;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--k-ink);font-variant-numeric:tabular-nums}
.k-stat .k-stat-delta{display:inline-flex;align-items:center;gap:3px;margin-top:6px;padding:2px 8px;border-radius:var(--k-radius-full);font-size:11.5px;font-weight:550;background:var(--k-accent-bg);color:var(--k-accent-ink)}
.k-stat .k-stat-delta[data-dir="down"]{background:var(--k-danger-bg);color:var(--k-danger-ink)}

Usage

For dashboards and summaries. One stat per idea; the delta always names its period in the label or title. Green means better, not just up.

Accessibility

The delta's direction is in the text (the arrow and the sign), never color alone.

List

Table