Pager

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

Usage & Examples

Default

default.tsx

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

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes

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

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

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

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

// States

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

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

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

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

// Sizes

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

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

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

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

// Variants

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

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

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

// Rounding

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

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

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

// Shadows

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

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

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

Props API

23 props
Columns
Pager props API
Default
Description
aria-describedbystringNoaria—Optional description id for the pagination navigation region.
aria-labelstringNoaria"Pagination"Accessible label for the pagination navigation region.
aria-labelledbystringNoaria—Optional labelledby id for the pagination navigation region.
classNamestringNostyling—Optional extra class name(s) for custom styling.
currentPagenumberYesprops—The currently active page (1-indexed).
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
getLiveRegionMessage((currentPage: number, totalPages: number) => string)Noevents(activePage, totalPages) => `Page ${activePage} of ${totalPages}`Function used to generate the live region status message.
getPageAriaLabel((page: number, isActive: boolean) => string)Noevents(pageNumber, isActive) => isActive ? `Current page, page ${pageNumber}` : `Go to page ${pageNumber}`Function used to generate an accessible label for each page button.
itemsPerPagenumberYesprops—Number of items to display per page.
liveRegionAriaLive"off" | "polite" | "assertive"Noprops"polite"ARIA live politeness setting for the status message.
nextButtonAriaLabelstringNoprops"Go to next page"Accessible label for the next page button.
onPageChange(page: number) => voidYesevents—Callback function invoked when a page change occurs.