List

An interactive list of records with an icon, title, description, trailing meta and row actions. Pick it over a table when each record reads as one line of text rather than as columns.

List
ListItem

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, List

AtlasCustomer portal and billingLive2 min ago

Beacon notifications service, with a deliberately long name to show wrappingEmail and push delivery for every product, retried with backoffDegraded1 h ago

CometInternal analyticsPausedYesterday

Dark theme, List

AtlasCustomer portal and billingLive2 min ago

Beacon notifications service, with a deliberately long name to show wrappingEmail and push delivery for every product, retried with backoffDegraded1 h ago

CometInternal analyticsPausedYesterday

High contrast theme, List

AtlasCustomer portal and billingLive2 min ago

Beacon notifications service, with a deliberately long name to show wrappingEmail and push delivery for every product, retried with backoffDegraded1 h ago

CometInternal analyticsPausedYesterday

UsageLink to the section Usage

tsx

import { List, ListItem } from '@skribly/ui/data'

tsx

<List aria-label="Projects" items={projects} selectionMode="multiple">
  {(p) => (
    <ListItem id={p.id} title={p.name} description={p.description}
      meta={<Badge tone="ok">Live</Badge>}
      actions={<IconButton label={`Deploy ${p.name}`} size="sm"><Rocket aria-hidden="true" /></IconButton>} />
  )}
</List>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

One tab stop; Up and Down move between items, Home and End jump, typing finds an item, Space selects and Enter runs onAction.
Right arrow reaches the buttons inside an item.
Selected items have a checkbox named after the item, a tint and a leading rule, and the system highlight in forced colours.
Titles wrap at large zoom unless truncate is set.

This demo runs through axe in all three themes on every test run. See what the tests check.