Back to Components

Data

List

Vertical row list with primary label and optional description. For tabular data with multiple columns use Table.

Examples

Static

  • Inbox 12 unread
  • Drafts 3 saved
  • Sent All caught up
  • Archive 4 months old
<List items={[
  {label: 'Inbox', description: '12 unread'},
  ...
]} />

Interactive

<List interactive items={[
  {label: 'Inbox', onClick: () => navigate('/inbox')},
  ...
]} />

Props

PropTypeDefaultDescription
items{label, description?, onClick?, disabled?}[]Row data.
borderedbooleantrueShow dividers between rows.
interactivebooleanfalseMake all rows hover/clickable.
childrenSnippetCustom row content if items prop is omitted.

Install

CLI

npx @a3tai/mittsu add list