List
Stripe ListRelated records inside a Section: flat rows separated by hairlines, a title with an optional grey second line on the left, a value on the right, an icon or image in front. With href the whole row is a real link; with onPress, or an id inside List onAction, it is a button. Row actions sit outside the clickable area, so opening a menu never opens the row.
onAction
Rows report their id.
Picked: none yet
When to use
- A provider's rules, an account's branches, quick links and help on an overview.
Not for
- A long, sortable, paged list — use a table.
Props
List
| Prop | Type | Description |
|---|---|---|
| children | ListItem elements | The rows. |
| onAction | (id) => void | Every ListItem with an id becomes a button reporting it. |
| size | "default" | "large" Default "default" | Taller rows for images. |
| aria-label | string | Names the list. |
| className | string | Extra classes on the outer element. |
ListItem
| Prop | Type | Description |
|---|---|---|
| title | ReactNode | Left, medium weight; teal on hover when interactive. |
| description | ReactNode | Grey second line (alias secondaryTitle). |
| value | ReactNode | Right-aligned, tabular. |
| icon | ComponentType | ReactNode | A lucide icon or any node, in front. |
| image | ReactNode | Wins over icon. |
| href | string | The whole row is a link with a chevron. |
| onPress | () => void | The whole row is a button. |
| id | string | Reported to List onAction. |
| actions | ReactNode | RowActions or IconActions beside the row. |
| disabled | boolean | Not interactive, greyed title. |