Card
CardProgress
Progress card with bar and/or donut visualization for a single metric.
CardProgress
Progress card that can render a horizontal bar, a donut circle, or both for visualizing a single metric as a percentage.
Component
<XACardProgress />
Progress card that can render a horizontal progress bar, a donut circle, or both.
<XACardProgress
label="Storage Used"
:value="73"
:max="100"
subtitle="27 GB remaining"
type="both"
color="warning"
size="md"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. Metric label. |
value | number | — | Required. Current value. |
max | number | 100 | Maximum value. |
subtitle | string | '' | Text shown beside the percentage. |
type | 'bar' | 'circle' | 'both' | 'bar' | Which visualization to render. |
color | 'primary' | 'success' | 'warning' | 'error' | string | 'primary' | Progress fill color. |
size | 'sm' | 'md' | 'lg' | 'md' | Label/circle size variant. |
AI Context
component: XACardProgress
package: "@xenterprises/nuxt-x-app"
use-when: Showing a single metric as a percentage of a maximum — storage usage, task completion, or goal progress. Use type="both" to render a bar and a circle together.