List

The mobile counterpart to DataTable. A dense table does not survive a narrow touch viewport, so records become a full-width list — one per row, each a comfortable tap target. ListItem reuses the same cell composites as DataTable, so a record reads identically on both.

Records

Vendor onboardingProcurement
Draft

<List aria-label="Projects">  <ListItem    primary="Northwind migration"    secondary="Platform · due Fri"    trailing={<CellBadge tone="warning" label="At risk" />}    onClick={() => open(project)}  />  <ListItem primary="Q3 capacity review" secondary="Ops" trailing={<CellBadge tone="success" label="On track" />} /></List>

A row with onClick or a render link becomes a full-row tap target with a trailing chevron; a plain row is a static div.

Loading

<List aria-label="Projects" loading skeletonCount={4} />

Empty and error states compose by rendering EmptyState or ErrorState as the list content — both are re-exported from @flabbergasted-ai/react/mobile.

Props

Prop	Type	Default	Notes
`List.loading`	`boolean`	`false`	Swap rows for a skeleton; sets aria-busy.
`List.skeletonCount`	`number`	`6`	Skeleton rows while loading.
`ListItem.primary / secondary`	`ReactNode`	—	Two-line content via CellStack.
`ListItem.leading / trailing`	`ReactNode`	—	Icon/avatar and badge/value slots.
`ListItem.chevron`	`boolean`	—	Drill-in chevron; defaults to interactive.
`ListItem.render`	`ReactElement`	—	Render as a link instead of a button.