data contract
ListItem
Single row inside a List. Image + title + subtitle + meta + chevron.
Variants
- default
- detail
- control
- navigation
Sizes
- sm
- md
- lg
Slots
- leading
- title
- subtitle
- meta
- trailing
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.