Pagination

Pagination renders a list of page links that let users quickly navigate content that is split into sequential pages.

React examples

Default

<Pagination pageCount={10} currentPage={2} showPages={{narrow: false}} />

Controlled

import React from 'react'
import {Pagination} from '@primer/react'


export default function Controlled() {
  const [currentPage, setCurrentPage] = React.useState(2)


  return (
    <Pagination
      pageCount={10}
      currentPage={currentPage}
      onPageChange={(_event, number) => {
        setCurrentPage(number)
      }}
      showPages={{narrow: false}}
    />
  )
}

Four page links at the start and end

If it would be useful for users to be able to skip to a page near the beginning or end of the list, define how many page links should be shown at the beginning and end.

<Pagination marginPageCount={4} pageCount={15} currentPage={9} showPages={{narrow: false}} />

Four page links surrounding the current page

You can specify how many page links before or after the current page will be shown. The first and last pages will always be shown, even if you set this value to 0.

<Pagination surroundingPageCount={4} pageCount={15} currentPage={9} showPages={{narrow: false}} />

Previous and next links only

If you want to prevent users from skipping pages and force them to navigate sequentially, you may hide the page numbers and only show the previous and next page links.

<Pagination showPages={false} pageCount={10} currentPage={2} />

Props