List
List components display a collection of interactive items in a structured, vertically stacked format. Each item supports a rich anatomy — leading icons or images, title and subtitle text, hint text, and trailing suffixes like buttons or chips — making them ideal for navigation menus, settings panels, and data browsing.
Items are passed as an array to the list prop. Each item’s suffix uses a discriminated union (suffixType: 'button' | 'chip') to render either a Button or Chips component inline.
Loading Code Block...Full example
Section titled “Full example”A list with multiple items demonstrating icons, images, hints, button/chip suffixes, and trailing chevrons.
Loading Code Block...Minimal example
Section titled “Minimal example”A list with the bare minimum — just a title and subtext per item.
Loading Code Block...Disabled items
Section titled “Disabled items”Items with disabled: true are visually muted and prevent onPress callbacks from firing.
Loading Code Block...List props
Section titled “List props”| Props | Default | Type | Description |
|---|---|---|---|
| list | [] | ListItem[] | Array of item objects to display. See the ListItem table below for the full object shape. |
| divide | true | boolean | Whether to show a horizontal divider line between items. |
ListItem object
Section titled “ListItem object”Suffix types
Section titled “Suffix types”The suffix object uses a discriminated union on the suffixType field:
| Props | Default | Type | Description |
|---|---|---|---|
| suffixType | - | 'button' | 'chip' | Determines which component to render. 'button' renders a Button (ghost link style), 'chip' renders a Chips badge. |
| ...ButtonProps | - | - | When suffixType is 'button', all Button component props are accepted (text, variant, size, onClick, etc.). |
| ...ChipsProps | - | - | When suffixType is 'chip', all Chips component props are accepted (text, color, size, etc.). |
Accessibility
Section titled “Accessibility”- Each list item is rendered as a
<button>, making it keyboard-focusable and screen-reader accessible - Disabled items receive
disabledattribute, preventing keyboard interaction and click events - Leading images include
altattributes for screen readers - Active items are visually distinguished with a background colour change