ListItem

One row of a list: a leading icon or avatar, a title with an optional description, and a trailing caret button, switch, button or text.

List item title

Description text

Usage

Import the component and render it.

import { ListItem } from 'src/components/ListItem/ListItem';
import { LifebuoyIcon } from '@phosphor-icons/react';

<ListItem
  leading="icon"
  trailing="icon"
  title="List item title"
  description="Description text"
  icon={<LifebuoyIcon />}
  avatar={{"src":"/docs/avatar-photo.jpg","name":""}}
  actionLabel="Button"
  hasTrailingAction
  trailingText="2h ago"
/>

Accessibility

Role: none of its own (a plain row); the trailing Button or Switch is the only interactive part.

Key	Action
`Tab`	Moves to the trailing Button or Switch; rows with trailing text have nothing to focus
`Enter / Space`	Activates the Button; Space toggles the Switch

The Switch has no visible label: the title names it, and the description describes it.
The trailing Button (and the caret) is described by the title, so several rows can share one action label.
Inside a list, wrap each row in an <li> within a <ul>.

Leading

Set the leading prop: Icon is "icon", Avatar is "avatar".

List item title

Description text

Icon

List item title

Description text

Avatar

<ListItem leading="icon" title="List item title" />
<ListItem leading="avatar" title="List item title" />

Trailing

Set the trailing prop: Icon is "icon", Toggle is "toggle", Button is "button", Text is "text".

List item title

Description text

Icon

List item title

Description text

Toggle

List item title

Description text

Button

List item title

Description text

2h ago

Text

<ListItem trailing="icon" title="List item title" />
<ListItem trailing="toggle" title="List item title" />
<ListItem trailing="button" title="List item title" />
<ListItem trailing="text" title="List item title" />

States

Default comes from the content (); Disabled from the disabled prop.

List item title

Description text

Default

List item title

Description text

Default

List item title

Description text

Disabled

<ListItem title="List item title" />
<ListItem title="List item title" disabled />

Composition

Use the following composition to build a ListItem:

ListItem
├── Avatar
├── Button
└── Switch

Used in

ListItem is part of Sidebar.

Actions

Pass callbacks to respond to the component.

import { ListItem } from 'src/components/ListItem/ListItem';
import { LifebuoyIcon } from '@phosphor-icons/react';

<ListItem
  leading="icon"
  trailing="icon"
  title="List item title"
  description="Description text"
  icon={<LifebuoyIcon />}
  avatar={{"src":"/docs/avatar-photo.jpg","name":""}}
  actionLabel="Button"
  hasTrailingAction
  trailingText="2h ago"
  onAction={() => console.log('onAction')}
  onCheckedChange={(checked) => console.log(checked)}
/>

Callback	When
`onAction`	Called when the trailing Button or caret is activated.
`onCheckedChange`	Called when the Switch is toggled.