build69
build69  /  Components  /  Data Display  /  ListMeta

ListMeta

v1.0.4Updated 27 Jul 2026

Compact meta-info row shown above or below a list (count, pagination summary, sort indicator, density toggle).

Preview

Live · 14 stories
DefaultOpen ↗
Why this is recommendedmetapaginationcountsummary+1

The default, out-of-the-box ListMeta.

Recommended for+14
  • Above lists and tables for "showing X of Y" context
Tags+6
metapaginationcountsummarydefault
Features+4
  • Total / filtered counts
  • Pagination summary
  • Density toggle
  • Sort label
  • Data states — loading (skeleton), empty (items={[]}), and error (inline role="alert" with a caller-supplied message + Retry, taking precedence over loading/empty)
  • i18n: labels prop overrides copy toast / copy + kebab aria-labels (DEFAULT_LIST_META_LABELS)
Not recommended for−2
  • Complex filter editing (use FilterBar)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "ListMeta" })

Usage

import { ListMeta } from '@/components/data-display/list-meta';

<ListMeta total={1240} filtered={42} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
total

Total record count

numberyes
filtered

Filtered count

number
error

Error state: an inline role="alert" region (aria-live=polite, destructive tint) shown in place of the row body. Takes precedence over loading/empty; the node is caller-supplied (message + optional Retry). Pass false/undefined to render normally

React.ReactNode
labels

Override built-in UI strings (copy toast, copy-button aria, kebab aria) for i18n; threaded to items/groups, English defaults exported as DEFAULT_LIST_META_LABELS

Partial<ListMetaLabels>

Related