Astryx Design System

Metadata List@astryxdesign/core v0.0.15 · MetadataList

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 {MetadataList} from '@astryxdesign/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.

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.