Card
CardQuotaBar
Single-resource quota card with a progress bar and auto-color threshold support.
CardQuotaBar
Single-resource quota card with a UProgress bar, optional auto-color thresholds, and a footer slot.
Component
<XACardQuotaBar />
Single-resource quota card with a UProgress bar, optional auto-color thresholds, and a footer slot.
<XACardQuotaBar
title="API Requests"
subtitle="This billing period"
:value="7800"
:max="10000"
unit="calls"
color="primary"
auto-color
show-percent
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Required. Card title. |
value | number | — | Required. Current usage value. |
max | number | — | Required. Maximum limit. |
subtitle | string | '' | Optional subtitle. |
unit | string | '' | Unit label (e.g. 'GB'). |
color | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | Progress bar color. |
icon | string | '' | Lucide icon name. |
showPercent | boolean | false | Show percentage instead of value/max. |
decimals | number | 0 | Decimal places for formatted values. |
autoColor | boolean | false | Auto-switch to warning/error color at thresholds. |
warningThreshold | number | 80 | Percentage at which to switch to warning color. |
errorThreshold | number | 95 | Percentage at which to switch to error color. |
AI Context
component: XACardQuotaBar
package: "@xenterprises/nuxt-x-app"
use-when: Showing a single resource's usage against a limit with a progress bar — API calls, storage, seats, etc. autoColor switches to warning at warningThreshold (default 80%) and error at errorThreshold (default 95%).