A single KPI tile — value, label, and an optional trend delta with a directional chevron. Follows the design system's canonical stat-card contract (value/label/trend/delta/invertPolarity). Composes into a "KPI band" by placing several `<al-stat>` inside a grid (see the KPI Band story) or an `<al-layout variant="bento">`.
PLAYGROUND2 CONTROLS
PREVIEW / al-stat / SOUTHLEFT
Loading preview
trend
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYSOUTHLEFT DESIGN SYSTEM
FIGMA AHEADSouthleft Design SystemFIGMA SET · Stat
The Figma set changed since the last confirmed sync — the code is behind.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
6 ATTR · 1 SLOT · 0 EVENT · 3 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEstat--DefaultPASS
Advanced statesAXE4 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 5 STORIES.
import '@southleft/al-web-components/components/stat';
import { ALStat } from '@southleft/al-react';
API — 6 PROPS6 DOCUMENTED
PROPTYPEDEFAULT
valuestringThe display value, e.g. "1,234" or "$4.2M". Typed as a string — the
consumer owns locale formatting, digit grouping, and unit suffixes.—
labelstringThe metric's label, e.g. "Active users".—
descriptionstringOptional supporting description rendered below the trend row.—
trend'up' | 'down' | 'none'Trend direction.
- **none** (default) No trend indicator is rendered
- **up** Renders an up chevron
- **down** Renders a down chevron'none'
deltastringThe delta text, e.g. "+12%". Renders next to the trend chevron. The
trend row only renders when this is a non-empty string.—
invertPolaritybooleanFlips ONLY the success/danger color mapping for metrics where a lower
number is better (cost, latency, churn). The chevron direction and the
accessible "Trending up/down" text always reflect the literal `trend`
value — only the color changes.—
SLOTS1
SLOTDESCRIPTION
iconOptional leading icon, rendered above the value.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS PARTS3
PARTDESCRIPTION
container—
value—
trend—
CSS CUSTOM PROPERTIES1
PROPERTYDESCRIPTIONDEFAULT
--al-stat-value-colorText color of the value. Defaults to `--al-theme-color-content-neutral-default`.—