Skip to content
DataBrowse data components
ComponentsDataStable

Stat

KPI tile with label, value, and trend indicator. Auto-grid with .lm-stat-grid.

Live preview

Revenue$1.28M▲ 12.4% vs Q1
Active seats18,420▲ 3.1% MoM
Risk reviews37▼ 8 open

Usage

Adapters:React stableVue stable
index.html
<div class="lm-stat">
  <span class="lm-stat-label">Revenue</span>
  <span class="lm-stat-value">$1.28M</span>
  <span class="lm-stat-trend lm-stat-trend-up">▲ 12.4%</span>
</div>

CSS classes (4)

ClassDescription
lm-statTile
lm-stat-gridAuto-fit grid
lm-stat-label / -value / -trendSlot typography
lm-stat-trend-up / -downSemantic green/red

React props (3)

PropTypeDefaultDescription
labelstring——
valuestring | number——
trend{ direction: 'up' | 'down'; label: string }——

Accessibility

  • Use <dl><dt><dd> if it's a definition list.
  • Trend indicator should not be color-only — pair with arrow + text.

Spotted something wrong? Edit this entry on GitHub.