Pagination

Move between pages of results.

import { Pagination } from 'components/UI/Pagination'

Basic

Use md by default and sm in dense UI, such as under a compact table. The previous and next controls stop at the ends.

Show the first and last pages, the current page, and its neighbors.

Use getPageHref when each page has a URL, and onPageChange for local state. These links open blog pages.

Use compact in narrow containers. It shows the page count between the previous and next controls. It does not switch on its own.

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Pagination is a site component. It uses the library Button, IconButton, and ButtonLink components.

Prop	Type	Default	Description
page	number	–	The current page, starting at 1. Required.
pageCount	number	–	The total number of pages. Required.
onPageChange	(page: number) => void	–	Receives a page number when a button activates.
getPageHref	(page: number) => string	–	Returns a URL for each page. Enables link mode.
siblingCount	number	1	The number of visible pages on each side of the current page.
size	'sm' \| 'md' \| 'lg'	'md'	Sets the size of every button.
compact	boolean	false	Shows the page count instead of page buttons.
className	string	–	Adds classes to the navigation element.