List states

Empty, loading and error states shown in place of the items, the same as in tables and trees.

List

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, List states

No projects yet.

Loading projects

Could not load projects.

Dark theme, List states

No projects yet.

Loading projects

Could not load projects.

High contrast theme, List states

No projects yet.

Loading projects

Could not load projects.

UsageLink to the section Usage

tsx

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

tsx

<List aria-label="Projects" items={items} isLoading={loading} loadingLabel="Loading projects"
  error={failed ? 'Could not load projects.' : undefined} emptyState="No projects yet.">
  {(p) => <ListItem id={p.id} title={p.name} />}
</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

Loading is a polite status, an error an assertive alert with an icon and words, and the empty state stays inside the named list.

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