Data
DataStatusBadge
Badge that auto-maps common status strings to semantic colors.
Data
Data components handle the rendering of structured information in detail views, sidebars, and list pages. They cover everything from a single formatted number to a full activity feed with date grouping.
Components
<XADataStatusBadge />
A UBadge wrapper that automatically maps common status string values to semantic colors. Supports a custom colorMap to extend or override defaults.
Built-in mappings include:
- success:
active,completed,approved,success,paid,delivered,published,verified,online - warning:
pending,review,processing,draft,scheduled - error:
failed,rejected,error,cancelled,overdue,blocked - neutral:
inactive,archived,unknown
<XADataStatusBadge status="active" />
<XADataStatusBadge status="pending" />
<XADataStatusBadge status="custom-state" :color-map="{ 'custom-state': 'info' }" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | string | '' | Status string — auto-mapped to a color. |
label | string | '' | Custom display label (defaults to capitalized status). |
color | string | '' | Override the auto-mapped color. |
colorMap | object | {} | Additional status-to-color mappings merged with the defaults. |
variant | string | 'soft' | UBadge variant. |
size | string | 'sm' | UBadge size. |
badgeClass | string | '' | Extra CSS classes. |
AI Context
component: XADataStatusBadge
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Data
use-when: Rendering a status string as a color-coded badge in table cells, detail panels, or list rows. Has a built-in color map; extend with the colorMap prop for custom statuses.
built-in-statuses:
success: [active, completed, approved, success, paid, delivered, published, verified, online]
warning: [pending, review, processing, draft, scheduled]
error: [failed, rejected, error, cancelled, overdue, blocked]
neutral: [inactive, archived, unknown]