ListItem

Quick Preview

Notification title

Supporting line of context

2h ago

Document checklist updated

Three new buyer requirements were added

Composition

Use this public composition when building ListItem:

ListItem
├── ListItemAvatar
│   └── AvatarImage | AvatarFallback | AvatarStatus
├── ListItemIcon
├── ListItemContent
│   ├── ListItemTitle
│   └── ListItemDescription
└── ListItemMeta | ListItemCount

Usage

<ListItem render={<button type="button" />}>
  <ListItemAvatar>
    <AvatarFallback>NK</AvatarFallback>
  </ListItemAvatar>
  <ListItemContent>
    <ListItemTitle>Notification title</ListItemTitle>
    <ListItemDescription>Supporting line of context</ListItemDescription>
  </ListItemContent>
  <ListItemMeta>2h ago</ListItemMeta>
</ListItem>

Examples

Default List Item

Use avatar, icon, meta, or count slots to fit activity feeds and notification lists.

Notification title

Supporting line of context

2h ago

Document checklist updated

Three new buyer requirements were added

States and Sizes

Use selected for navigation/current-item rows, native disabled controls for unavailable action rows, and size="lg" for roomier surfaces.

Default row

Medium density list item

Now

Selected row

Medium density list item

Default row

Large density list item

Now

Selected row

Large density list item

Props

Prop/API	Type	Default	Description
`size`	`"md" \| "lg"`	`"md"`	Controls row density, text scale, and leading/trailing slot sizes.
`selected`	`boolean`	`false`	Applies the selected brand-subtle surface and selected text treatments.
`render`	Base UI render prop	-	Changes the rendered root element while preserving styles.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React div props	-	Passed through to the root.

Accessibility

Render the root as a button or link when the whole row is actionable. Interactive row styling is applied automatically for semantic interactive roots, role="button", and role="link".
Use native disabled for button rows and aria-disabled for link rows.
Keep one primary action per row; do not nest multiple competing controls inside one ListItem.
Use selected only when the row represents the current item or current navigation destination.
Do not use ListItemCount for severity. Use a status component when the value communicates state rather than count.

On this page