Avala Design
← Components/patterns

Pagination

Carbon-spec pagination control. Page-size dropdown + range label + prev/next/first/last buttons. For pure page-number nav, see PaginationNav.

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Pagination, PaginationNav } from "@avala/design";

<Pagination>
  <PaginationNav />
</Pagination>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

patterns-pagination--defaultOpen in Storybook →

When to use

  • **Pagination** — Bottom of any DataTable / virtualised list. The user adjusts page size *and* navigates pages.
  • **PaginationNav** — Public listings, search results, blog archives where page-size is fixed and the user navigates by clicking page numbers.

When not to use

  • Infinite scroll surfaces → don't paginate; just stream rows.
  • < 1 page of data → don't render Pagination.
  • Step-by-step flows → use `ProgressIndicator`.