XDS — Design System

XDSMetadataListItem@xds/core · MetadataList

Preview coming soon

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.

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.

Anatomy

Element		Description
Title		Optional title for the metadata list.
Label	required	The key label for each metadata entry.
Metadata	required	The value displayed in various formats.
Disclosure		Collapse/expand control for the list.

Import

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

Props

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.

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>
  );
}