Pagination

Default

A 10-page set with interactive prev/next and page number buttons.

Page 1 of 10

import { useState } from 'react';
import { Pagination } from '@eekodigital/raster';

function PaginationDemo() {
  const [page, setPage] = useState(1);
  return <Pagination page={page} totalPages={10} onPageChange={setPage} />;
}

Few pages

When there are only a handful of pages all page numbers are shown.

Page 1 of 3

<Pagination page={page} totalPages={3} onPageChange={setPage} />

With item range

Pass an itemRange to render a live-announced Items X–Y of N caption under the pager. Handy on admin lists and public feeds where users want to see the full size of the data set.

<Pagination
  page={page}
  totalPages={7}
  onPageChange={setPage}
  itemRange={{ from: 21, to: 40, total: 134 }}
/>

SSR anchor mode

Pass a getHref instead of onPageChange to render page controls as real <a href> links. This works without JavaScript, is crawlable, and is the right shape for server-rendered routes where the URL (?page=N) is the source of truth. Use this on public-facing paginated feeds; use the callback form for client-driven dialogs and admin tools that fetch in place.

In this mode the current page renders as a <span aria-current="page"> rather than a self-link, and disabled prev/next render as <span aria-disabled="true">.

<Pagination
  page={2}
  totalPages={7}
  getHref={(p) => `?page=${p}`}
  itemRange={{ from: 21, to: 40, total: 134 }}
/>

Props

Prop	Type	Default	Description
`page`	`number`	—	The current active page (1-based).
`totalPages`	`number`	—	The total number of pages.
`onPageChange`	`(page: number) => void`	—	Click-mode callback. Required when `getHref` is not provided. Renders controls as `<button>`.
`getHref`	`(page: number) => string`	—	Anchor-mode href generator. Required when `onPageChange` is not provided. Renders controls as `<a href>`; current page as `<span aria-current=“page”>`; disabled prev/next as `<span aria-disabled=“true”>`.
`itemRange`	`{ from: number; to: number; total: number }`	—	Optional. When provided, renders a live-announced `Items from–to of total` caption below the pager.
`aria-label`	`string`	`”Pagination”`	Disambiguates multiple pagination landmarks on the same page.