Default

Pagination renders previous and next arrow buttons with customisable content between them — typically a page indicator such as "Page 1 of 5".

() => {
  const [page, setPage] = React.useState(1)
  const totalPages = 5

  return (
    <Pagination
      onPreviousButtonClick={() => setPage(Math.max(1, page - 1))}
      onNextButtonClick={() => setPage(Math.min(totalPages, page + 1))}
      isPreviousButtonDisabled={page === 1}
      isNextButtonDisabled={page === totalPages}
    >
      Page {page} of {totalPages}
    </Pagination>
  )
}

Disabled buttons

The isPreviousButtonDisabled and isNextButtonDisabled props control whether each navigation button is interactive. Disable the previous button on the first page and the next button on the last page.

<Pagination
  onPreviousButtonClick={() => {}}
  onNextButtonClick={() => {}}
  isPreviousButtonDisabled={true}
  isNextButtonDisabled={true}
>
  No pages available
</Pagination>

Best practices

1. Always disable the previous button on the first page and the next button on the last page to clearly communicate navigation boundaries.
2. Display a meaningful page indicator between the buttons — for example "Page 2 of 10" or "2 / 10" — so users know where they are.
3. For very large data sets, consider combining Pagination with a page size selector or a direct page-number input.

Accessibility

• Each button renders with a tooltip ("Previous Page" / "Next Page") that is announced by screen readers.
• Disabled buttons are automatically excluded from the tab order.