Photonix UI - React Components, Templates & Figma Design System

List

Lists are continuous, vertical indexes of text or images. Item content is flexible with various leading and trailing extensions.

Preview

Main Inbox24 new messages

99+

Photonix Design SystemDrafting the new list spec

Project AssetsShared with 5 collaborators

Usage

import { List, ListItem } from '@photonix/ultimate';

<List variant="elevated">
  <ListItem 
    content="Main Inbox" 
    description="24 new messages" 
    leadingType="icon"
    leadingIcon={<Document size={24} />}
    trailingType="text"
    trailingText="99+"
    divider 
  />
  <ListItem 
    content="Project Assets" 
    description="Shared with 5 collaborators"
    leadingType="image"
    imageSrc="..."
    trailingType="actions"
    actionIcons={[<Share />, <Trash />]}
  />
</List>

Component API

List

Prop	Type	Default	Description
children	`React.ReactNode`	`-`	List items
className	`string`	`-`	Additional class name
variant	`"default" \| "outlined" \| "elevated"`	`'default'`	Visual variant of the list container - default: transparent, no border - outlined: border and radius - elevated: shadow and background
width	`string \| number`	`-`	Custom width

ListItem

Prop	Type	Default	Description
content	`string`	`-`	Main content text
description	`string`	`-`	Description text (body medium, secondary color)
progress	`number`	`-`	Progress value (0-100), shows progress bar instead of description
leadingType	`"icon" \| "avatar" \| "image" \| "none"`	`'none'`	Leading element type
leadingIcon	`React.ReactNode`	`-`	Leading icon element (when leadingType is 'icon')
avatarSrc	`string`	`-`	Avatar props (when leadingType is 'avatar')
avatarName	`string`	`-`
imageSrc	`string`	`-`	Image src (when leadingType is 'image')
trailingType	`"text" \| "none" \| "chevron" \| "text-chevron" \| "switch" \| "checkbox" \| "check" \| "actions" \| "spinner"`	`'none'`	Trailing element type
trailingText	`string`	`-`	Trailing text (when trailingType is 'text' or 'text-chevron')
trailingVariant	`"body-md" \| "body-lg"`	`'body-md'`	Typography variant for trailing text
switchChecked	`boolean`	`-`	Switch checked state
onSwitchChange	`((checked: boolean) => void)`	`-`	Switch onChange handler
checkboxChecked	`boolean`	`-`	Checkbox checked state
onCheckboxChange	`((checked: boolean) => void)`	`-`	Checkbox onChange handler
isSelected	`boolean`	`-`	Check icon visible (for single select)
actionIcons	`React.ReactNode[]`	`[]`	Action icons (when trailingType is 'actions')
onActionClick	`((index: number) => void)`	`-`	Action icon click handlers
trailing	`React.ReactNode`	`-`	Custom trailing content
onClick	`(() => void)`	`-`	Click handler for the list item
disabled	`boolean`	`false`	Disabled state
divider	`boolean`	`false`	Show bottom divider
multiline	`boolean`	`false`	Allow description to wrap to multiple lines instead of truncating
className	`string`	`-`	Additional class name

Variants

Leading Elements

Visualize your data with icons, avatars, or detailed images.

System Settings

Alex SmithMaintainer

Project ThumbnailLast edited 5m ago

Leading Elements

<ListItem content="Icon" leadingType="icon" leadingIcon={<Star />} />
<ListItem content="Avatar" leadingType="avatar" avatarName="Alex" />
<ListItem content="Image" leadingType="image" imageSrc="..." />

Trailing Elements

Actions, indicators, and controls for each row.

Profile Settings

Cloud Status

Connected

Auto-SaveSave changes automatically

Trailing Elements

<ListItem content="Chevron" trailingType="chevron" />
<ListItem content="Text & Chevron" trailingType="text-chevron" trailingText="View" />
<ListItem content="Controls" trailingType="switch" />

Actions & Loading

Inline actions for quick tasks and loading indicators for async states.

Presentation.pdf2.4 MB

Syncing DataPlease wait...

Actions & Loading

<ListItem trailingType="actions" actionIcons={[<Download />, <Trash />]} />
<ListItem trailingType="spinner" />

Progress & Multiline

Show status bars and handle long content gracefully.

Uploading Image

Feedback from ClientThe current design looks great, but could we try a slightly darker blue for the primary action button to improve accessibility?

Progress & Multiline

<ListItem progress={65} />
<ListItem multiline content="Long Content" description="..." />

Selection Modes

Standard selection controls for single or multiple item management.

Multiple SelectionCheckbox interaction

Single SelectionCheckmark indicator

Selection Modes

<ListItem trailingType="checkbox" />
<ListItem trailingType="check" isSelected />

List Containers

Three visual variants to match different UI contexts.

DEFAULT (TRANSPARENT)

Item 1

Item 2

ELEVATED (WITH SHADOW)

Item 1

Item 2

List Containers

<List variant="default">...</List>
<List variant="outlined">...</List>
<List variant="elevated">...</List>

List

Preview

Component API

List

ListItem

Variants

Leading Elements

Trailing Elements

Actions & Loading

Progress & Multiline

Selection Modes

List Containers

On this page