List

An accessible list container (role="list") for a series of ListItems — title/description/action rows, like an invoice list or a settings list.

<List>
  ...
</List>

Examples

<List>
  {invoices.map((invoice) => (
    <ListItem
      key={invoice.id}
      title={invoice.client}
      description={`Due ${invoice.dueDate}`}
      action={<Badge variant={invoice.paid ? "success" : "warning"}>{invoice.status}</Badge>}
    />
  ))}
</List>

For tabular data with more than one column of information per record, reach for Table instead — List is for single-column rows, each read as one unit.

Props