Descriptions

Key and value pairs for summaries and detail panels. The size prop (xs, sm, md, lg, xl) sets the font size and spacing.

Jump to API reference

Import

Vue
import { UiDescriptions } from '@ziyarago/ui/vue'

Booking details

Booking
ZG-1042
Guest
Ahmed Khan
Hotel
Hilton Makkah
Dates
12 - 17 Nov 2026
Notes
—
Vue
<UiDescriptions
  :items="[{ label: 'Booking', value: 'ZG-1042' }, { label: 'Guest', value: 'Ahmed Khan' }, { label: 'Hotel', value: 'Hilton Makkah' }, { label: 'Dates', value: '12 - 17 Nov 2026' }, { label: 'Notes' }]"
 />

Sizes

Booking
ZG-1042
Guest
Ahmed Khan
Hotel
Hilton Makkah
Booking
ZG-1042
Guest
Ahmed Khan
Hotel
Hilton Makkah
Booking
ZG-1042
Guest
Ahmed Khan
Hotel
Hilton Makkah
Booking
ZG-1042
Guest
Ahmed Khan
Hotel
Hilton Makkah
Booking
ZG-1042
Guest
Ahmed Khan
Hotel
Hilton Makkah
Vue
<UiDescriptions
  :items="[{ label: 'Booking', value: 'ZG-1042' }, { label: 'Guest', value: 'Ahmed Khan' }, { label: 'Hotel', value: 'Hilton Makkah' }]"
  size="xs"
 />

<UiDescriptions
  :items="[{ label: 'Booking', value: 'ZG-1042' }, { label: 'Guest', value: 'Ahmed Khan' }, { label: 'Hotel', value: 'Hilton Makkah' }]"
  size="sm"
 />

<UiDescriptions
  :items="[{ label: 'Booking', value: 'ZG-1042' }, { label: 'Guest', value: 'Ahmed Khan' }, { label: 'Hotel', value: 'Hilton Makkah' }]"
  size="md"
 />

<UiDescriptions
  :items="[{ label: 'Booking', value: 'ZG-1042' }, { label: 'Guest', value: 'Ahmed Khan' }, { label: 'Hotel', value: 'Hilton Makkah' }]"
  size="lg"
 />

<UiDescriptions
  :items="[{ label: 'Booking', value: 'ZG-1042' }, { label: 'Guest', value: 'Ahmed Khan' }, { label: 'Hotel', value: 'Hilton Makkah' }]"
  size="xl"
 />

API reference

Definition list of label and value pairs for record details.

Props

PropType and valuesDefaultDescription
itemsrequired{ label: string; value?: string | number | VNode }[][]Pairs rendered as dt/dd. Missing value renders an em dash.
sizexssmmdlgxl'md'Font size and spacing.