XDS — Design System

MetadataList@xds/core v0.0.13 · XDSMetadataList

Usage

MetadataList displays key-value pairs for object attributes like quality, condition, and status, in a structured layout. Use it for detail panels, settings summaries, and record information.

ts
import {XDSMetadataList} from '@xds/core/MetadataList'

Best practices

Guidance	Practices
Do	Choose label position based on content — "start" for short values, "top" for long or complex values.
Do	Collapse long lists with `maxNumOfItems` to keep the page scannable.
Don't	Use for extensive form input — use a form layout instead.
Don't	Use for data that doesn't have a clear key-value structure.

Sub-components

MetadataList is a compound component with 2 sub-components.

XDSMetadataList

Container for metadata items with column layout, orientation, and collapse support.

Prop	Type	Description
childrenrequired	ReactNode	Metadata items (XDSMetadataListItem components).
columns	'multi' \| 'single' \| number (default: 'single')	Column layout mode.
label	{ position?: 'start' \| 'top', width?: number \| string } (default: { position: 'start' } (single-column) / { position: 'top' } (multi-column))	Label display configuration. position controls label placement, width sets a custom label column width. Defaults to { position: 'top' } for multi-column layouts.
maxNumOfItems	number	Maximum items to show before collapsing with a show more/less toggle.
orientation	'vertical' \| 'horizontal' (default: 'vertical')	Layout orientation. Horizontal mode flows items in a row with flex-wrap.
title	ReactNode	Optional title or heading above the list.
xstyle	StyleXStyles	StyleX styles for layout customization. Must be a stylex.create() value.

XDSMetadataListItem

A single labeled metadata value within an XDSMetadataList.

Prop	Type	Description
childrenrequired	ReactNode	Content value for this metadata item.
labelrequired	string	Label text for this metadata item.
icon	ReactNode	Icon rendered before the label text.

Examples

Common configurations, variations, and states.

MetadataList — Basic

Single-column key-value metadata list.

MetadataList — Collapsible

Metadata list with a show-more toggle after a set number of items.

MetadataList — Horizontal

Horizontal metadata items for compact inline display.

MetadataList — Multi-Column

Multi-column metadata grid with token tags.

Usage

MetadataList displays key-value pairs for object attributes like quality, condition, and status, in a structured layout. Use it for detail panels, settings summaries, and record information.

import {XDSMetadataList} from '@xds/core/MetadataList'

Best practices

Guidance	Practices
Do	Choose label position based on content — "start" for short values, "top" for long or complex values.
Do	Collapse long lists with `maxNumOfItems` to keep the page scannable.
Don't	Use for extensive form input — use a form layout instead.
Don't	Use for data that doesn't have a clear key-value structure.

Prop

Type

Description

childrenrequired

ReactNode

Metadata items (XDSMetadataListItem components).

columns

'multi' | 'single' | number (default: 'single')

Column layout mode.

label

{ position?: 'start' | 'top', width?: number | string } (default: { position: 'start' } (single-column) / { position: 'top' } (multi-column))

Label display configuration. position controls label placement, width sets a custom label column width. Defaults to { position: 'top' } for multi-column layouts.

maxNumOfItems

number

Maximum items to show before collapsing with a show more/less toggle.

orientation

'vertical' | 'horizontal' (default: 'vertical')

Layout orientation. Horizontal mode flows items in a row with flex-wrap.

title

ReactNode

Optional title or heading above the list.

xstyle

StyleXStyles

StyleX styles for layout customization. Must be a stylex.create() value.

Prop

Type

Description

childrenrequired

ReactNode

Content value for this metadata item.

labelrequired

string

Label text for this metadata item.

icon

ReactNode

Icon rendered before the label text.