ListItem

A flexible component for creating list items with leading and trailing elements, supporting text, icons, and avatars.

Import

import ListItem from '@/components/layout/ListItem';

Features

Support for leading elements (icon, avatar, or custom component)
Primary title with optional subtitle
Trailing elements for actions or indicators
Link navigation via href
Press handling support
Automatic disabled state styling
Dark mode compatible

Props

Prop	Type	Default	Description
`title`	`React.ReactNode`	Required	Primary text or component
`subtitle`	`React.ReactNode`	—	Secondary text or component
`leading`	`React.ReactNode`	—	Custom leading component
`avatar`	`{ src?: string, name?: string, size?: 'xs' \| 'sm' \| 'md' }`	—	Avatar configuration
`icon`	`IconConfig`	—	Icon configuration for leading element
`trailing`	`React.ReactNode`	—	Custom trailing component
`trailingIcon`	`IconConfig`	—	Icon configuration for trailing element
`disabled`	`boolean`	`false`	Whether the item is disabled
`className`	`string`	`''`	Additional Tailwind classes
`style`	`ViewStyle`	—	Additional style object
`href`	`string`	—	Navigation link destination
`onPress`	`() => void`	—	Handler for press events

Basic Usage

// Basic list item with title and subtitle
<ListItem 
  title="Account Settings"
  subtitle="Manage your profile and preferences"
/>
 
// List item with icon and navigation
<ListItem
  title="Notifications"
  icon={{ name: "Bell" }}
  trailingIcon={{ name: "ChevronRight" }}
  href="/settings/notifications"
/>
 
// List item with avatar
<ListItem
  title="John Doe"
  subtitle="Online"
  avatar={{ src: "https://example.com/avatar.jpg", size: "sm" }}
  onPress={() => handleUserSelect()}
/>
 
// Disabled list item
<ListItem
  title="Premium Feature"
  subtitle="Upgrade your account to access"
  icon={{ name: "Lock" }}
  disabled
/>

ListItem

ListItem

Import

Features

Props

Basic Usage

On this page