@agala-labs/ui
Stat
Presents one key metric with optional supporting context, trend, and icon.
Examples
Vertical cards support side-by-side comparison of a small set of decision-relevant metrics.
Dashboard cards
Monthly revenue$24,800
+12.4% vs last month
Active members1,284
Across 18 teams
-2.1% vs last month
<AgalaStat label="Monthly revenue" value="$24,800" :trend="12.4" trend-label="vs last month" icon="trending-up" />
<AgalaStat label="Active members" value="1,284" secondary-value="Across 18 teams" :trend="-2.1" trend-label="vs last month" icon="users" />Import
import { AgalaStat } from '@agala-labs/ui'API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required metric label. |
value | string | number | — | Required metric value. |
secondaryValue | string | number | — | Neutral supporting value rendered before any trend. |
trend | number | — | Signed trend value. |
trendLabel | string | — | Trend context. |
icon | string | — | Agala icon name. |
iconBg | 'primary' | 'danger' | 'success' | 'warning' | 'info' | — | Icon surface. |
layout | 'vertical' | 'row' | 'inline' | 'vertical' | Vertical cards, icon-led rows, or intrinsic inline summaries. |
bordered | boolean | true | Adds the quiet grouped surface. |
labelTransform | string | — | CSS text transform override. |
Accessibility
Trend direction is conveyed by signed text and labels as well as color/icon.