DataList

A key-value pair list for displaying metadata, settings, and detail views. Renders semantic dl/dt/dd HTML. Supports horizontal and vertical orientations, three sizes, and any ReactNode as a value.

Anatomy

<DataList orientation="horizontal" size="md">
  <DataListItem>
    <DataListLabel>Label</DataListLabel>
    <DataListValue>Value</DataListValue>
  </DataListItem>
</DataList>

Examples

Status: Active
Email: alice@example.com
Role: Admin
Member since: January 2024

Vertical

Status: Active
Email: alice@example.com
Role: Admin
Member since: January 2024

Sizes

Plan: Pro
Billing cycle: Monthly
Next invoice: 1 May 2026

Plan: Pro
Billing cycle: Monthly
Next invoice: 1 May 2026

Plan: Pro
Billing cycle: Monthly
Next invoice: 1 May 2026

Rich values

Values accept any ReactNode — avatars, badges, links, code.

Owner: HP
Haydn Phillips
Environment: Staging
Version: v2.4.1
Region: eu-west-1

Custom label width

Override the default 8rem label column with minWidth on DataListLabel.

Billing address: 123 Example Street, London, EC1A 1BB
Company name: Acme Corp Ltd
VAT number: GB 123 456 789

DataList props

orientation= 'horizontal'

'horizontal' | 'vertical'

horizontal — label and value side by side. vertical — label above value.

size= 'md'

'sm' | 'md' | 'lg'

Controls text size and row padding.

className

string

Additional classes on the dl element.

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	horizontal — label and value side by side. vertical — label above value.
size	'sm' \| 'md' \| 'lg'	'md'	Controls text size and row padding.
className	string	—	Additional classes on the dl element.

DataListLabel props

minWidth= '8rem'

string

Minimum width of the label column in horizontal orientation.

className

string

Additional classes.

Prop	Type	Default	Description
minWidth	string	'8rem'	Minimum width of the label column in horizontal orientation.
className	string	—	Additional classes.

PreviousBadge NextDataTable