Library · Foundations

Pagination

Fully accessible pagination nav with first/previous/next/last controls; supports custom render callbacks (renderProgress, renderPageLabel) for localising the progress text and link aria-labels.

Figma: Primitives / Pagination ↗

Live preview — edit theme bottom-right

---
import Pagination from "../components/primitives/pagination/Pagination.astro";
---
<Pagination
  currentPage="3"
  totalPages="12"
  firstPage="#"
  previousPage="#"
  nextPage="#"
  lastPage="#"
/>
<Pagination
  currentPage="1"
  totalPages="12"
  firstPage={null}
  previousPage={null}
  nextPage="#"
  lastPage="#"
/>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply
`currentPage`	`string \| number`	—	Current page number (default: "1")
`totalPages`	`NumericalString \| number`	—	Total number of pages (default: "12")
`firstPage`	`RouteString`	—	URL for the first page (default: "#")
`previousPage`	`RouteString`	—	URL for the previous page (default: "#")
`nextPage`	`RouteString`	—	URL for the next page (default: "#")
`lastPage`	`RouteString`	—	URL for the last page (default: "#")
`ariaLabel`	`string`	—	Accessible label for the navigation (default: "Pagination")
`firstPageLabel`	`string`	—	Accessible label for the first page button (default: "Go to the first page")
`previousPageLabel`	`string`	—	Accessible label for the previous page button (default: "Go to the previous page")
`nextPageLabel`	`string`	—	Accessible label for the next page button (default: "Go to the next page")
`lastPageLabel`	`string`	—	Accessible label for the last page button (default: "Go to the last page")
`renderProgress`	`({ currentPage, totalPages, }: { currentPage: string \| number totalPages: string \| number }) => string`	—	Function to render the progress text
`renderPageLabel`	`({ type, page, }: { type: 'first' \| 'previous' \| 'next' \| 'last' page: string \| number }) => string`	—	Function to generate the aria-label for page links
`[key: string]`	`string \| number \| boolean \| undefined \| Function`	—	HTML attributes to spread on the pagination

Example with all props

---
const renderProgress = ({ currentPage, totalPages }) =>
  `Page ${currentPage} of ${totalPages}`;
const renderPageLabel = ({ type, page }) =>
  `Go to the ${type} page (page ${page})`;
---
<Pagination
  class="blog-pagination"
  currentPage={3}
  totalPages={12}
  firstPage="/blog"
  previousPage="/blog/2"
  nextPage="/blog/4"
  lastPage="/blog/12"
  ariaLabel="Blog pagination"
  firstPageLabel="Go to the first page"
  previousPageLabel="Go to the previous page"
  nextPageLabel="Go to the next page"
  lastPageLabel="Go to the last page"
  renderProgress={renderProgress}
  renderPageLabel={renderPageLabel}
/>