Preview loads on approachPreview loads on approach
Exact source · metadata-list-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
export default function MetadataListShowcase() {
return (
<MetadataList>
<MetadataListItem label="Name">MetadataList</MetadataListItem>
<MetadataListItem label="Status">Active</MetadataListItem>
<MetadataListItem label="Owner">Joey</MetadataListItem>
</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.
Choose label position based on content: "start" for short values, "top" for long or complex values.
Collapse long lists with maxNumOfItems to keep the page scannable.
Use for extensive form input; use a form layout instead.
Use for data that doesn't have a clear key-value structure.
