List item
A rich list row primitive with leading tile or avatar, title, badge, meta, favourite toggle, menu and chevron, plus selectable, destructive, disabled and three density variants.
Preview
Recent files
3 of 128Edited by Ana · 12 min
- 2.4 MB
6 collaborators
Read only · moved last week
Settings
- 3 active
Reviewers
1 selected- AR
Design lead
- TL
Frontend · away until 3pm
- WO
Research
They get view access until accepted
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Row title; becomes the main control's name. |
| description | ReactNode | — | Second line (hidden in compact density). |
| meta | ReactNode | — | Right-aligned secondary value such as a size or time. |
| badge | ReactNode | — | Inline badge after the title. |
| leading | ReactNode | — | Leading ListItemTile, avatar or any element. |
| href | string | — | Makes the row a link and shows a chevron. |
| onClick | () => void | — | Makes the row a button. |
| chevron | boolean | !!href | Shows the trailing chevron. |
| selectable | boolean | false | Turns the row into a checkbox; the leading element flips to a check. |
| selected | boolean | false | Selection state for selectable rows. |
| onSelectedChange | (selected: boolean) => void | — | Called when a selectable row toggles. |
| favorite | boolean | — | Shows a favourite toggle when defined. |
| onFavoriteChange | (favorite: boolean) => void | — | Called when the favourite toggles. |
| menu | ReactNode | — | MenuItem nodes for a trailing More menu. |
| variant | "default" | "destructive" | "default" | Destructive tints the title in danger red. |
| disabled | boolean | false | Mutes the row and disables every control. |
| density (ListGroup) | "compact" | "default" | "comfortable" | "default" | Row height, tile size and type scale for the group. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.