Preview loads on approachPreview loads on approach
Exact source · list-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {List, ListItem} from '@astryxdesign/core/List';
export default function ListShowcase() {
return (
<List>
<ListItem label="Notifications" description="Manage your alerts" />
<ListItem label="Privacy" description="Control your data" />
<ListItem label="Security" description="Password and 2FA" />
</List>
);
}
Usage
A vertical collection of items with consistent spacing, dividers, and optional markers. Supports headers, icons, avatars, badges, and interactive items with click or link behavior. Use it to display ordered or unordered groups of related content.
Provide a header to label the list and give context to screen readers.
Use start and end content slots to add icons, avatars, or badges to each item.
Place interactive elements inside an interactive list item; it creates nested click targets and confusing focus behavior.
Use a list for a single item or for laying out unrelated content; lists imply a meaningful collection.
Mix clickable and non-clickable items in the same list without clear visual distinction.
Compensate for item content inset on each inline edge by cancelling the smaller of each item's built-in horizontal inset and the container's published inline padding. The margin reads the same variable the items derive their inline padding from, so it tracks density and theme padding overrides automatically without pulling rows outside zero-padding or full-bleed surfaces. Use under a section heading to bring row text toward the heading text. Content aligns when container padding is at least the item inset; smaller padding leaves some inset uncompensated. Omit to leave item positions unchanged.
header
ReactNode
Header content, associated with the list via aria-labelledby.
