Card
CardQuota
Multi-quota card displaying usage bars with warning, critical, and exceeded states.
CardQuota
Displays multiple usage quotas in a grid or list layout with warning/critical/exceeded badges and optional overage pricing.
Component
<XACardQuota />
Displays multiple usage quotas in a grid or list layout with warning/critical/exceeded badges and optional overage pricing.
<XACardQuota
title="Plan Usage"
:quotas="[
{ label: 'API Calls', used: 8200, limit: 10000, unit: 'calls', icon: 'i-lucide-zap', warningThreshold: 80 },
{ label: 'Storage', used: 4.2, limit: 5, unit: 'GB', icon: 'i-lucide-hard-drive' },
]"
reset-date="2026-04-01"
show-summary
current-plan="Pro"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
quotas | array | — | Required. Array of quota objects. |
title | string | '' | Card title. |
description | string | '' | Card subtitle. |
resetDate | Date | string | null | null | Quota reset date shown in the header. |
layout | 'grid' | 'list' | 'grid' | Layout mode. |
columns | number | — | Number of grid columns. |
showSummary | boolean | false | Show a footer summarising limits reached. |
currentPlan | string | '' | Plan name shown in the summary footer. |
Emits
| Event | Payload | Description |
|---|---|---|
upgrade | — | Fired when the "Upgrade Plan" button is clicked. |
AI Context
component: XACardQuota
package: "@xenterprises/nuxt-x-app"
use-when: Showing plan usage limits and resource consumption for multiple resources in one card — API calls, storage, seats, etc. Emits "upgrade" when the upgrade button is clicked.