Components · Data Display

Statistic

A single headline number with a caption, prefix/suffix (text or icon), precision, trend colour and a loading skeleton.

Examples

Trend

Prefix

Suffix

Statistic · prefix/suffix icons · precision · trend colour · loading

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-statistic> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';          // registers <aha-icon> for prefix/suffix icons
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-statistic.js';  // registers <aha-statistic>
</script>

<div style="display:flex; gap:40px; align-items:flex-start">
  <aha-statistic label="Response rate" value="92" suffix="%" trend="up"></aha-statistic>
  <aha-statistic label="Revenue" value="12840.5" precision="2" prefix-icon="system-currency-circle-dollar"></aha-statistic>
  <aha-statistic label="Loading…" loading></aha-statistic>
</div>

import '@ahaslides-product/design/icons';        // registers <aha-icon> for prefix/suffix icons
import '@ahaslides-product/design/aha-statistic'; // registers <aha-statistic>

// The custom element renders its own shadow DOM; React just passes attributes.
// Note: hyphenated attrs (prefix-icon, suffix-icon) are written as-is on the custom element.
function Kpi({ label, value, suffix, precision, prefixIcon, trend, loading }) {
  return (
    <aha-statistic
      label={label}
      value={value}
      suffix={suffix}
      {...(precision != null ? { precision } : {})}
      {...(prefixIcon ? { 'prefix-icon': prefixIcon } : {})}
      {...(trend ? { trend } : {})}
      {...(loading ? { loading: '' } : {})}
    />
  );
}

// usage
<Kpi label="Response rate" value="92" suffix="%" trend="up" />
<Kpi label="Revenue" value="12840.5" precision="2" prefixIcon="system-currency-circle-dollar" />
<Kpi label="Loading…" loading />

// main.ts — register the elements + mark aha-* as custom elements
import '@ahaslides-product/design/icons';        // registers <aha-icon> for prefix/suffix icons
import '@ahaslides-product/design/aha-statistic';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<template>
  <aha-statistic label="Response rate" value="92" suffix="%" trend="up" />
  <aha-statistic label="Revenue" value="12840.5" precision="2" prefix-icon="system-currency-circle-dollar" />
  <aha-statistic label="Loading…" loading />
</template>

API

Prop	Type	Default	Notes
`label`	string	`—`	The caption above the value
`value`	string \| number	`—`	The headline figure
`precision`	number	`—`	Format value to N decimal places with en-US thousands separators (non-numeric values left verbatim)
`prefix`	string	`—`	Small text before the value (e.g. a currency mark)
`suffix`	string	`—`	Small text after the value (e.g. %, unit)
`prefix-icon`	icon name	`—`	A DS icon before the value (e.g. system-currency-circle-dollar)
`suffix-icon`	icon name	`—`	A DS icon after the value
`trend`	up \| down	`—`	Tint the value success-green/error-red + a matching trend arrow glyph
`loading`	boolean	`false`	Show a shimmer skeleton in place of the figure

Install

# .npmrc — once: point the @ahaslides-product scope at GitHub Packages
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages

npm i @ahaslides-product/design
import '@ahaslides-product/design/tokens.css';   // once, at the app root
import '@ahaslides-product/design/aha-statistic';   // registers <aha-statistic>

Agent feed for this component (absolute, fetchable anywhere): statistic.agent.json · statistic.md · statistic.llms.txt

When to use

Statistic — a single KPI on a dashboard or results screen
Badge — a small count attached to another element
Progress — a value's share of a whole

Caption names the metric in sentence case — 'Active players', not 'ACTIVE PLAYERS'. Use trend only when up/down carries meaning; the element pairs the tint with a trend arrow glyph so colour is never the sole signal. Reach for prefix-icon/suffix-icon (a currency mark, a %) over a decorative image; set precision for money/rates so the figure reads consistently.

Surfaces

dashboard audience

Spec

Caption 14/22 #4A4A4A · Value 24/32 SemiBold #1A1A1A · Prefix / suffix 14/22 Regular #8A8A8A, text or a 16px DS icon · Precision value formatted to N decimals, en-US thousands separators · Trend up color-success #16C49A + trend-up glyph · down color-error #F5222D + trend-down glyph · Loading shimmer skeleton (label + value bars), motion-token animation, role=status