Pagination

Navigation controls for paging through content with previous, next, and numbered page buttons.

Preview

Usage

tsx
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "zostel-ui";

<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>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Props

isActive
Type: boolean
Default: false

Highlights the current page link as active.

href
Type: string
Default: —

The URL the pagination link points to.

size
Type: "default" | "sm" | "lg"
Default: "default"

Size of the pagination buttons.

className
Type: string
Default: —

Additional CSS classes for the pagination container.
Previous Breadcrumb Next Toggle