Navigation Pagination

Pagination

Page by page — the words Previous and Next fold away on phones.

Preview

Usage

tsx

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

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
    <PaginationItem><PaginationLink href="?page=1" isActive>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="?page=2">2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="?page=2" /></PaginationItem>
  </PaginationContent>
</Pagination>

PaginationLink

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	The current page (aria-current="page", orange outline).
`size`	`ButtonProps["size"]`	`"icon"`	Button size.
`href`	`string`	—	Where it goes.

isActive

Type: boolean

Default: false

The current page (aria-current="page", orange outline).

size

Type: ButtonProps["size"]

Default: "icon"

Button size.

href

Type: string

Default: —

Where it goes.