Maple · Display

List Item

A row for settings, contacts, files and menus. Pick a leading element, write a title and optional description, and end with a chevron or a meta value.

View in Storybook →

Leading elements

Icon, avatar, checkbox; chevron or meta trailing.

ARAsha Raoasha@maple.designOwner

Sync over Wi-Fi onlySaves mobile data

Brand guidelines.pdf2.4 MBOct 12

<ListItem leading={{ icon: "bell" }} title="Notifications" description="Push, email and SMS" chevron href="/settings/notifications" />

Props

Prop	Type	Default	Description
`title`	`string`	—	Title.
`description`	`string`	—	Supporting text.
`leading`	`{ icon } \| { avatar } \| { checkbox }`	—	Leading element.
`trailing`	`ReactNode`	—	Meta value.
`chevron`	`boolean`	false	Navigation chevron.
`href / onClick`	`string / () => void`	—	Makes the row interactive.