MetadataList

Displays a list of label-value metadata pairs in configurable layouts.

Examples

Default

Repository

Status

Active

Owner

Design systems

Created

May 27, 2026

Visibility

Internal

<MetadataList
  title="Repository"
>
  {( <> <MetadataListItem icon={CircleCheck} label="Status"> Active </MetadataListItem> <MetadataListItem icon={User} label="Owner"> Design systems </MetadataListItem> <MetadataListItem icon={Calendar} label="Created"> May 27, 2026 </MetadataListItem> <MetadataListItem icon={Eye} label="Visibility"> Internal </MetadataListItem> </> )}
</MetadataList>

Labels On Top

Repository

Status

Active

Owner

Design systems

Created

May 27, 2026

Visibility

Internal

<MetadataList
  title="Repository"
  labelPosition="top"
>
  {( <> <MetadataListItem label="Status">Active</MetadataListItem> <MetadataListItem label="Owner">Design systems</MetadataListItem> <MetadataListItem label="Created">May 27, 2026</MetadataListItem> <MetadataListItem label="Visibility">Internal</MetadataListItem> </> )}
</MetadataList>

Labels On Top With Icons

Repository

Status

Active

Owner

Design systems

Created

May 27, 2026

Visibility

Internal

<MetadataList
  title="Repository"
  labelPosition="top"
>
  {( <> <MetadataListItem icon={CircleCheck} label="Status"> Active </MetadataListItem> <MetadataListItem icon={User} label="Owner"> Design systems </MetadataListItem> <MetadataListItem icon={Calendar} label="Created"> May 27, 2026 </MetadataListItem> <MetadataListItem icon={Eye} label="Visibility"> Internal </MetadataListItem> </> )}
</MetadataList>

Icon Only Labels

Repository

Status

Active

Owner

Design systems

Created

May 27, 2026

Visibility

Internal

<MetadataList
  title="Repository"
>
  {( <> <MetadataListItem icon={CircleCheck} isIconOnly label="Status"> Active </MetadataListItem> <MetadataListItem icon={User} isIconOnly label="Owner"> Design systems </MetadataListItem> <MetadataListItem icon={Calendar} isIconOnly label="Created"> May 27, 2026 </MetadataListItem> <MetadataListItem icon={Eye} isIconOnly label="Visibility"> Internal </MetadataListItem> </> )}
</MetadataList>

Long Values

Project details

Owner

Design systems

Description

This project provides a shared set of accessible, themeable UI components used across all internal applications. It includes layout primitives, form controls, data display elements, and composite patterns that follow the company design guidelines.

Status

Active

<MetadataList
  title="Project details"
>
  {( <> <MetadataListItem icon={User} label="Owner"> Design systems </MetadataListItem> <MetadataListItem label="Description"> This project provides a shared set of accessible, themeable UI components used across all internal applications. It includes layout primitives, form controls, data display elements, and composite patterns that follow the company design guidelines. </MetadataListItem> <MetadataListItem icon={CircleCheck} label="Status"> Active </MetadataListItem> </> )}
</MetadataList>

Without Title

Status

Active

Owner

Design systems

Created

May 27, 2026

<MetadataList>
  {( <> <MetadataListItem label="Status">Active</MetadataListItem> <MetadataListItem label="Owner">Design systems</MetadataListItem> <MetadataListItem label="Created">May 27, 2026</MetadataListItem> </> )}
</MetadataList>

API

MetadataList

Displays a list of label-value metadata pairs in configurable layouts.

Prop	Type	Default	Description
children*	ReactNode	—	Metadata items to render inside the list.
className	string	—	Additional CSS class names applied to the root.
data-testid	string	—	Test ID applied to the root.
labelPosition	"start" | "top"	'start'	Position of item labels relative to their values.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
style	CSSProperties	—	Inline styles applied to the root.
title	string	—	Optional title rendered above the list as a heading.

MetadataListItem

A single label-value pair rendered inside a MetadataList.

Prop	Type	Default	Description
children*	ReactNode	—	Value content rendered beside or below the label.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
icon	IconComponent	—	Optional icon rendered before the label text.
isIconOnly	boolean	—	Visually hides the label text, rendering only the icon while keeping the label available to assistive technology. Requires icon.
label*	string	—	Descriptive label for this metadata entry.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
style	CSSProperties	—	Inline styles applied to the root element.