Pagination

Pagination navigates datasets split across pages. Place it after the table or list it controls, and keep the current page visibly active.

Basic usage

Code

<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>
      <PaginationEllipsis />
    </PaginationItem>

    <PaginationItem>
      <PaginationLink href="#">10</PaginationLink>
    </PaginationItem>

    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Compact labels

Code

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" text="Back" />
    </PaginationItem>

    <PaginationItem>
      <PaginationLink href="#" size="sm">
        1
      </PaginationLink>
    </PaginationItem>

    <PaginationItem>
      <PaginationNext href="#" text="Forward" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

API

Pagination

No documented props

PaginationContent

No documented props

PaginationEllipsis

No documented props

PaginationItem

No documented props

PaginationLink

Name	Type/Description
isActive	boolean | undefined Marks the link as the current page and sets `aria-current="page"`.
size = "icon"	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined

PaginationNext

Name	Type/Description
isActive	boolean | undefined Marks the link as the current page and sets `aria-current="page"`.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined
text = "Next"	string | undefined Visible label shown from the small breakpoint up.

PaginationPrevious

Name	Type/Description
isActive	boolean | undefined Marks the link as the current page and sets `aria-current="page"`.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined
text = "Previous"	string | undefined Visible label shown from the small breakpoint up.