Skip to content
Site volume
Colourway

Components

Pagination

Previous and Next keys around numbered page squares; on phones, "Page 2 of 7".

  • Experimental
  • Reading layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/pagination
On this page

Pagination moves through a long list one page at a time: literal "Previous" and "Next" keys around 40 px page squares in tabular figures (the first and last page, one sibling each side of the current one, gaps as "…"). The current page prints on the selected face. Below the sm container width the squares give way to "Page 2 of 7". Every link comes from href(page), so it works without JavaScript.

Example#

Look of this example
Live render of examples/pagination/basic.tsx

Usage#

Use pagination to move through a long list one page at a time: the journal, a gallery of work. Every page is a real link from href(page), so it works without JavaScript and each page can be shared.

  • Shape. Literal "Previous" and "Next" keys around page squares: the first and the last page, one on each side of the current one, and "…" for gaps.
  • Phones. Below the sm width the squares give way to "Page 2 of 7".
  • Short lists need no pagination; a list people want to see whole is better on one page.

Anatomy#

The parts of examples/pagination/basic.tsx, numbered:
  1. Previousdata-mk-part="previous"
  2. Pagesdata-mk-part="pages"
  3. Current pageOn the selected face, with aria-current..mk-pagination-page[aria-current="page"]
  4. Nextdata-mk-part="next"

Volume#

Reading layer: identical at every volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The keys say "Previous" and "Next"; no arrows alone, no "Older" and "Newer" that depend on sort order.

Do and don't#

Do

Literal keys and a short run of pages.

Don't

« ‹ 1 2 3 4 5 6 7 › »

Bare symbols and every page.

Symbols alone are guesswork for many readers and screen readers. The words and the short run keep the control small and clear.

Accessibility#

  • A nav named "Pagination"; the current page carries aria-current="page" and every page link is named "Page n".
  • At the first or last page the key it cannot follow stays in place, disabled, so the layout never jumps.
  • Page squares grow to 44 px under a coarse pointer.
KeysWhat happens
TabMoves through Previous, the page links and Next
EnterFollows the focused link

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-text--mk-surfaceuinot in this looknot in this look
--mk-on-selected--mk-selecteduinot in this looknot in this look

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
page requirednumbernoneThe current page, from 1.
pageCount requirednumbernone
href required(page: number) => stringnoneThe URL of a page.
copyPartial<PaginationCopy>none

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from PaginationProps in packages/overprint-react/src/reading/pagination/pagination.tsx.

Tokens#

System tokens (18)

Its own properties (2)

  • --mk-pagination-leading
  • --mk-pagination-square

Scanned from its CSS at build and checked against its registry entry; 7 read but not declared there.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • MinorreactBreadcrumbs, Pagination (with paginationRange), Count, ProgressBar (bar, segments, indeterminate), Avatar and AvatarGroup, Tick, EmptyState, Kbd, Skeleton and Loader. Read the whole entry