Pagination

Numbered navigation through pages of results.

Default

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

Icons only

Icons only: prev/next drop their text labels for square, icon-sized targets; the label moves to aria-label.

{/* icon-only prev/next: no label, square icon target */}
<PaginationLink href="#" aria-label="Previous">
  <ChevronLeftIcon />
</PaginationLink>

Markdown for agents: /design/pagination.md · spec: /design.md