Card
CardKpiSimple
Compact KPI card with currency formatting, trend indicator, and optional budget progress bar.
CardKpiSimple
Compact prop-based KPI card with automatic currency formatting, an optional trend indicator, and a budget progress bar.
Component
<XACardKpiSimple />
Compact KPI card with automatic currency formatting, an optional trend indicator, and a budget progress bar.
<XACardKpiSimple
label="Actual Spend"
:value="63000"
:trend="-4"
:budget="80000"
show-percentage
color="#10b981"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. KPI label. |
value | string | number | — | Required. KPI value (numbers are formatted as currency). |
trend | number | null | undefined | Percentage change. |
color | string | '#3b82f6' | Dot accent color. |
showPercentage | boolean | false | Show a progress bar as % of budget. |
budget | number | 0 | Budget cap used to calculate the progress bar. |
AI Context
component: XACardKpiSimple
package: "@xenterprises/nuxt-x-app"
use-when: Displaying a quick currency-formatted KPI card with trend and budget progress bar. For custom chart or markup inside a KPI card use XACardKpi instead.