XDS — Design System

MetadataListItem@xds/core · XDSMetadataListItem v0.0.13

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 {XDSMetadataListItem} 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.

Showcase source

tsx
'use client';
import {XDSMetadataList, XDSMetadataListItem} from '@xds/core/MetadataList';
import {XDSBadge} from '@xds/core/Badge';
import {XDSLink} from '@xds/core/Link';
export default function MetadataListItemShowcase() {
  return (
    <XDSMetadataList title="Project Details">
      <XDSMetadataListItem label="Name">Design System v2</XDSMetadataListItem>
      <XDSMetadataListItem label="Status">
        <XDSBadge label="Active" variant="green" />
      </XDSMetadataListItem>
      <XDSMetadataListItem label="Owner">
        <XDSLink label="Alice Johnson" href="#">Alice Johnson</XDSLink>
      </XDSMetadataListItem>
      <XDSMetadataListItem label="Created">January 15, 2025</XDSMetadataListItem>
      <XDSMetadataListItem label="Priority">
        <XDSBadge label="High" variant="red" />
      </XDSMetadataListItem>
      <XDSMetadataListItem label="Repository">
        <XDSLink label="github.com/org/design-system" href="#">github.com/org/design-system</XDSLink>
      </XDSMetadataListItem>
    </XDSMetadataList>
  );
}