Pagination

Navigation controls for moving between pages of content. Provides numbered links plus previous and next shortcuts.

Numbered Pagination

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Direction

Previous and next buttons swap visually in RTL — the previous link sits on the right, next on the left, and the chevron icons rotate to point in reading direction. Order within the list follows the DOM, so logical ordering is preserved.

API Reference

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply to the pagination container.