Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
  • Experimental
  • Not reviewed for accessibility
import {Pagination} from '@primer/react-brand'



Hide page numbers

Hide page numbers at specific breakpoints

Custom href

Component props

Pagination Required

pageCountnumbertrueThe total number of pages
currentPagenumbertrueThe current page number
onPageChange(e: React.MouseEvent, n: number) => voidfalseCallback function for when the page changes
hrefBuilder(n: number) => stringfalseFunction to build the href for each page
marginPageCountnumberfalseDefines how many pages are to be displayed on the left and right of the component
falseWhether to show the page numbers
surroundingPageCountnumberfalseThe number of pages to show on each side of the current page