Pagination

Use Pagination to display a sequence of links that allow navigation to discrete, related pages.

Ready to use


import {Pagination} from '@primer/react-brand'

Examples

Loading

Loading

Loading

Loading

name	type	required	description
`pageCount`	`number`	`true`	The total number of pages
`currentPage`	`number`	`true`	The current page number
`onPageChange`	`(e: React.MouseEvent, n: number) => void`	`false`	Callback function for when the page changes
`hrefBuilder`	`(n: number) => string`	`false`	Function to build the href for each page
`pageAttributesBuilder`	`(n: number) => {[attributeName: string]: string}`	`false`	Forward custom attributes to pagination links.
`marginPageCount`	`number`	`false`	Defines how many pages are to be displayed on the left and right of the component. Will be reduced on narrow viewports.
`showPages`	`boolean`	`false`	Whether to show the page numbers
`surroundingPageCount`	`number`	`false`	The number of pages to show on each side of the current page. Will be hidden on narrow viewports.