Component

Pagination

Navigation control for moving through paged content. Includes previous/next arrows and numbered page buttons.

Usage

Use pagination when content is split across pages. Show prev/next plus nearby page numbers. Disable prev on first page and next on last.

Playground

Preview

Configure

Code

const [currentPage, setCurrentPage] = React.useState(1)
const totalPages = 11
const pages = getPaginationPages(currentPage, totalPages)

<Pagination>
  <PaginationPrev
    onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
    disabled={currentPage === 1}
  />
  {pages.map((page, index) =>
    page === "ellipsis" ? (
      <PaginationEllipsis key={`ellipsis-${index}`} />
    ) : (
      <PaginationItem
        key={page}
        aria-current={page === currentPage ? "page" : undefined}
        onClick={() => setCurrentPage(page)}
      >
        {page}
      </PaginationItem>
    )
  )}
  <PaginationNext
    onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
    disabled={currentPage === totalPages}
  />
</Pagination>

Do

  • Disable the Prev button on page 1 and Next on the last page
  • Highlight the current page clearly so users know where they are
  • Use ellipsis for large page counts rather than showing all numbers

Don't

  • Don't use pagination for small data sets, show all results instead
  • Don't hide pagination below the fold, place it at the bottom of the list or table