Pager

The Pager component allows for pagination controls to navigate large datasets by limiting the number of items displayed at once.

Usage & Examples

default.tsx


<Pager
  totalItems={20}
  itemsPerPage={2}
  currentPage={1}
  onPageChange={(pageNumber) => console.log("Page changed:", pageNumber)}
/>

Pager props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Optional description id for the pagination navigation region.
`aria-label`	`string`	No	aria	`"Pagination"`	Accessible label for the pagination navigation region.
`aria-labelledby`	`string`	No	aria	`—`	Optional labelledby id for the pagination navigation region.
`className`	`string`	No	styling	`—`	Optional extra class name(s) for custom styling.
`currentPage`	`number`	Yes	props	`—`	The currently active page (1-indexed).
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`getLiveRegionMessage`	`((currentPage: number, totalPages: number) => string)`	No	events	(activePage, totalPages) => `Page ${activePage} of ${totalPages}`	Function used to generate the live region status message.
`getPageAriaLabel`	`((page: number, isActive: boolean) => string)`	No	events	(pageNumber, isActive) => isActive ? `Current page, page ${pageNumber}` : `Go to page ${pageNumber}`	Function used to generate an accessible label for each page button.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Applies a translucent frosted-glass treatment to the pager and nested controls.
`itemsPerPage`	`number`	Yes	props	`—`	Number of items to display per page.
`liveRegionAriaLive`	`"off" \| "polite" \| "assertive"`	No	props	`"polite"`	ARIA live politeness setting for the status message.
`next-button-aria-label`	`string`	No	props	`"Go to next page"`	Accessible label for the next page button.