List
Use GdsList for a vertical group of rows - settings, navigation, inbox items, or options.
Use GdsListItem for static rows. Use GdsListItemButton for clickable rows.
Build lists with these pieces:
GdsListwraps the rowsGdsListItemfor static rowsGdsListItemButtonfor clickable rowsGdsListItemIconfor a leading iconGdsListItemAvatarfor a leading avatarGdsListItemTextfor the main and secondary textGdsDividerfor a line between rowsGdsListSubheaderfor a section label
Usage
A basic list with a title and optional secondary text on each row.
With avatar
Add an avatar before the text for people or accounts.
Avatar and action
Show an avatar on the left and an action button on the right, like Delete.
Dividers
Add a divider between rows to separate groups of content.
Clickable rows
Use GdsListItemButton when a row should be clicked, like a link or action.
Section label
Use a subheader to label a group of related rows.
Nested list
Nest rows under a parent item that can expand and collapse.
Selected item
Mark the current choice with selected so users can see which row is active.
No side padding
Turn off the default side padding when you need tighter rows.
Props
External references
For the full and always up-to-date props, use the MUI references below.