data contract
ListItem
Single row inside a List. Image + title + subtitle + meta + chevron.
Variants
- default
- Title + subtitle
- detail
- Title + subtitle + leading avatar + trailing chevron
- control
- Title + trailing toggle / select
- navigation
- Title + chevron — links to detail
Sizes
- sm
- md
- lg
Slots
- leading
- Avatar / icon / index number
- title
- subtitle
- meta
- Right-aligned secondary info (date, count)
- trailing
- Chevron, toggle, or action button
Example
<ListItem leading={<Avatar />} title={user.name} subtitle={user.role} trailing={<ChevronIcon />} />Usage rule
When clickable, the whole row is the target — never just the title.
The full ListItem contract has 4 more rules, plus the do-not patterns. Get the full recipe.