ListItem

A versatile list item component with leading and trailing content slots, link and click support, selection highlighting, loading skeleton, and configurable dividers. Pairs with the List wrapper for automatic divider management.

Import

import { ListItem, List } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<List divider="full">
  <ListItem
    title="Beginner Surf Lesson"
    description="Bondi Beach - 9:00 AM"
    leading={<Avatar src="/instructor.jpg" />}
    trailing={<Badge variant="success">Active</Badge>}
    href="/lessons/123"
    showChevron
  />
  <ListItem
    title="Advanced Techniques"
    description="Manly Beach - 2:00 PM"
    leading={<Avatar src="/instructor2.jpg" />}
    trailing={<Badge variant="default">Draft</Badge>}
    onClick={() => openLesson('456')}
  />
</List>

ListItem Props

Prop	Type	Default	Description
`title`*	ReactNode	-	Primary content or title text.
`description`	ReactNode	-	Secondary content or description text.
`leading`	ReactNode	-	Left-side content such as an icon, avatar, or checkbox.
`trailing`	ReactNode	-	Right-side content such as a badge, action button, or metadata.
`onClick`	() => void	-	Click handler. Makes the item interactive.
`href`	string	-	Link URL. Makes the entire item a clickable Next.js Link.
`showChevron`	boolean	`false`	Whether to show a chevron-right icon at the end.
`selected`	boolean	`false`	Whether the item is in a selected state.
`disabled`	boolean	`false`	Whether the item is disabled.
`loading`	boolean	`false`	Whether to show a skeleton loading placeholder.
`divider`	'none' \| 'full' \| 'inset'	`'none'`	Divider style between items.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size variant controlling padding and text sizes.
`className`	string	-	Additional CSS classes.

List Props

Property	Type	Default	Description
`children`	`ReactNode`	--	List items to render.
`divider`	`'none' \| 'full' \| 'inset'`	`'none'`	Divider style applied between items.
`className`	`string`	--	Additional CSS classes.