displaytexulinot agent-emittableapp
KPI
kpi
A formatted metric with unit, previous-period delta and optional link.
Live examples
Orders KPI
Orders KPI
Loading demo…
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
label | string | yes | — | — |
value | number | no | — | Current numeric value (nullable) |
unit | enum (number, compact, cents, percent) | no | "number" | — |
currency | string | no | — | ISO currency when unit is cents |
previous | number | no | — | — |
comparisonLabel | string | no | — | — |
positive | enum (up, down) | no | "up" | — |
sparkline | slot | no | — | — |
href | string | no | — | — |
hrefTrust | enum (developer, untrusted) | no | "developer" | — |
loading | boolean | no | false | — |
empty | unknown | no | — | true or empty message string |
variant | enum (elevated, flat) | no | "elevated" | — |
class | string | no | — | — |
Keyboard
| Key | Action |
|---|---|
— | See accessibility notes for keyboard behavior. |
Accessibility
- Loading and empty states are announced; linked tiles use real anchors after URL policy.
Evidence for kpi
Latest committed gates for kpi (as of 2026-10-23). Static snapshot — not live CI.
Behavior
n/ano behavior scenario
No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).
Size (gzip)
texuli/kpi · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Show a numeric KPI with unit formatting and comparison
Don’t use when
Prefer another component
- A free-form already-formatted string (use stat)