Pagination

Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
  • Alpha
  • Not reviewed for accessibility
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found here.
import {Pagination} from '@primer/react'

Examples

The pagination component only requires two properties to render: pageCount, which is the total number of pages, and currentPage, which is the currently selected page number (which should be managed by the consuming application).

However, to handle state changes when the user clicks a page, you also need to pass onPageChange, which is a function that takes a click event and page number as an argument:

type PageChangeCallback = (evt: React.MouseEvent, page: number) => void

By default, clicking a link in the pagination component will cause the browser to navigate to the URL specified by the page. To cancel navigation and handle state management on your own, you should call preventDefault on the event, as in this example:

To customize the URL generated for each link, you can pass a function to the hrefBuilder property. The function should take a page number as an argument and return a URL to use for the link.

type HrefBuilder = (page: number) => string

Customizing which pages are shown

Two props control how many links are displayed in the pagination container at any given time. marginPageCount controls how many pages are guaranteed to be displayed on the left and right of the component; surroundingPageCount controls how many pages will be displayed to the left and right of the current page.

The algorithm tries to minimize the amount the component shrinks and grows as the user changes pages; for this reason, if any of the pages in the margin (controlled via marginPageCount) intersect with pages in the center (controlled by surroundingPageCount), the center section will be shifted away from the margin. Consider the following examples, where pages one through six are shown when any of the first four pages are selected. Only when the fifth page is selected and there is a gap between the margin pages and the center pages does a break element appear.

Previous/next pagination

To hide all the page numbers and create a simple pagination container with just the Previous and Next buttons, set showPages to false.

Theming

The following snippet shows the properties in the theme that control the styling of the pagination component:

export default {
// ... rest of theme ...
pagination: {
borderRadius,
spaceBetween,
colors: {
normal: {
fg,
},
disabled: {
fg,
border,
},
hover: {
border,
},
selected: {
fg,
bg,
border,
},
active: {
border,
},
nextPrevious: {
fg,
},
},
},
}

Props

Pagination

NameTypeDefaultDescription
currentPage Required
number

The currently selected page.

pageCount Required
number

The total number of pages.

hrefBuilder
function

A function to generate links based on page number.

marginPageCount
number
1

How many pages to always show at the left and right of the component.

onPageChange
function
no-op

Called with event and page number when a page is clicked.

showPages
boolean | { narrow?: boolean, regular?: boolean, wide?: boolean }
true

Whether or not to show the individual page links.

surroundingPageCount
number
2

How many pages to display on each side of the currently selected page.

sx
SystemStyleObject

Status

Alpha

  • Component props and basic example usage of the component are documented on primer.style/react.
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has robust unit test coverage (100% where achievable).
  • Component has visual regression coverage of its default and interactive states.
  • Component does not introduce any axe violations.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Beta

  • Component is used in a production application.
  • Common usage examples are documented on primer.style/react.
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component does not introduce any performance regressions.

Stable

  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.
  • Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.