Data
KeyValue
Single key-value row with automatic type rendering for text, badge, boolean, link, email, phone, currency, date, copy, and code.
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
<XAKeyValue />
A single label-value row (<dt> / <dd>) that automatically renders the value according to its type. Accepts a default slot for fully custom value rendering.
<XAKeyValue label="Email" value="alice@example.com" type="email" />
<XAKeyValue label="Status" value="active" type="badge" badge-color="success" />
<XAKeyValue label="Created" value="2025-03-15" type="date" date-format="long" />
<XAKeyValue label="API Key" value="sk-abc123" type="copy" />
<XAKeyValue label="Verified" :value="true" type="boolean" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. The key/label text. |
value | string | number | boolean | Date | object | undefined | The value to display. |
type | 'text' | 'badge' | 'boolean' | 'link' | 'email' | 'phone' | 'currency' | 'date' | 'copy' | 'code' | 'text' | Rendering type. |
layout | 'horizontal' | 'vertical' | 'inline' | 'horizontal' | Label/value layout direction. |
size | 'sm' | 'md' | 'lg' | 'md' | Font size variant. |
icon | string | '' | Lucide icon shown before the label. |
emptyText | string | '—' | Text shown when the value is empty/null/undefined. |
currency | string | 'USD' | ISO currency code for type="currency". |
dateFormat | 'date' | 'time' | 'datetime' | 'relative' | 'short' | 'long' | 'date' | Date display format for type="date". |
badgeColor | string | 'neutral' | Badge color for type="badge". |
linkText | string | '' | Link label for type="link" (defaults to the URL). |
showBooleanLabel | boolean | true | Show Yes/No label beside the boolean icon. |
trueLabel | string | 'Yes' | Label for true in boolean type. |
falseLabel | string | 'No' | Label for false in boolean type. |
noBorder | boolean | false | Remove the bottom border/divider. |
AI Context
component: XAKeyValue
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Data
use-when: Rendering a single labeled field in a detail view. Handles 10 value types automatically (text, badge, boolean, link, email, phone, currency, date, copy, code) — prefer it over custom formatting.