Vertical collections with leading and trailing slots.
| Prop | Type | Notes |
|---|---|---|
| title / description | ReactNode | Primary line and muted sub-line |
| leading / trailing | ReactNode | Avatar, icon, badge, chevron or action |
| onClick | () => void | Makes the row a button; whole row is the target |
| selected | boolean | Sets aria-pressed and the warm check |
| ↑ / ↓ · Enter | — | Move between rows; activate the focused one |
Use a List for a vertical collection of like items. For columns of comparable data use a Table; for a set of filters use Pills.
Keep rows to one idea. Consistent slots make the set scannable.
Don't cram a spreadsheet into a row. Comparable columns want a Table.
Align leading media and text so every row reads on the same grid.
Don't overload the trailing slot. One signal per row, not three.
Navigable settings sections, each a row with a chevron.
Member and contact lists with avatar, name and role.
Records with a status badge in the trailing slot.
| Token | Value | Role |
|---|---|---|
| --list-pad | 12px 14px | Row padding |
| --list-gap | 12px | Slot-to-slot spacing |
| --list-border | #1E1E1E | Outer border |
| --list-divider | #1A1A1A | Hairline between rows |
| --list-hover | #131418 | Row hover fill |
| --list-lead | 34px | Leading avatar / icon size |
<div class="o-list">
<button class="o-list__row" aria-pressed="true">
<span class="o-list__lead"><span class="o-avatar">AL</span></span>
<span class="o-list__body">
<span class="o-list__title">Ada Lovelace</span>
<span class="o-list__desc">Design Lead</span>
</span>
<span class="o-list__trail"><Badge>PAID</Badge></span>
</button>
</div>