Pagination

An interactive component designed to navigate through multiple pages of content.

Usage

Basic Pagination

Render a Pagination:

<Pagination totalRecords={100} recordsPerPage={10} currentPage={1} onPageChanged={(page) => console.log(`Navigated to page: ${page}`)} highContrast />

Variants

Change the visual appearance using the variant prop.

<Flex direction="column" width="100%">
  <Pagination totalRecords={100} recordsPerPage={10} currentPage={1} onPageChanged={(page) => console.log(`Navigated to page: ${page}`)} variant="outlined" />
  <Pagination totalRecords={100} recordsPerPage={10} currentPage={1} onPageChanged={(page) => console.log(`Navigated to page: ${page}`)} highContrast variant="solid" />
</Flex>

Custom Page Count

Specify the number of visible page buttons using the showPageCount prop.

<Pagination totalRecords={100} recordsPerPage={10} currentPage={5} showPageCount={3} onPageChanged={(page) => console.log(`Navigated to page: ${page}`)} highContrast />

API

Props

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
totalRecords	number	-	Yes
recordsPerPage	number	-	Yes
onPageChanged	(pageNumber: number) => void	-	Yes
currentPage	number	-	Yes
showPageCount	number	5	-
variant	'outlined' | 'solid'	'outlined'	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-
highContrast	boolean	-	-
shadow	ThemeShadow	-	-