Pagination — Design System

Default (10 pages, page 5 active)

A standard pagination with 10 pages, the 5th page marked as active.

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious /></PaginationItem>
    <PaginationItem><PaginationLink>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink>4</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink isActive>5</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>6</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink>10</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext /></PaginationItem>
  </PaginationContent>
</Pagination>

First page (Previous disabled)

When on the first page, disable the Previous button.

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious disabled /></PaginationItem>
    <PaginationItem><PaginationLink isActive>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink>10</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext /></PaginationItem>
  </PaginationContent>
</Pagination>

Last page (Next disabled)

When on the last page, disable the Next button.

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious /></PaginationItem>
    <PaginationItem><PaginationLink>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink>8</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>9</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink isActive>10</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext disabled /></PaginationItem>
  </PaginationContent>
</Pagination>

Few pages (no ellipsis)

When the total is small, show all page numbers without ellipsis.

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious disabled /></PaginationItem>
    <PaginationItem><PaginationLink isActive>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext /></PaginationItem>
  </PaginationContent>
</Pagination>