Pagination

Page navigation control across data tables, lists, and editorial documentation supporting numeric pages, simple compact status, and article card variants.

// Plain markup
import { Pagination } from "@shavin/ui";

Numeric Page Numbers (Default)

Current Page: 3 of 10

Component Source

const [page, setPage] = useState(3);

<Pagination page={page} totalPages={10} onPageChange={setPage} />

Simple / Compact Status

Component Source

<Pagination variant="simple" page={page} totalPages={5} onPageChange={setPage} />

Cards Variant (Doc / Content Navigation)

Component Source

<Pagination
  variant="cards"
  prevTitle="Foundations Overview"
  nextTitle="Typography Overview"
/>

Props Specification

Prop	Type	Default	Description
page	number	1	Current active page (1-indexed). Default 1.
totalPages	number	1	Total number of pages. Default 1.
onPageChange	(page: number) => void	—	Callback fired when a page is selected.
prevLabel	string	Previous	Custom label for previous button/link. Default "Previous".
nextLabel	string	Next	Custom label for next button/link. Default "Next" or "Up next".
prevTitle	string	—	Title text for previous item (used in "cards" variant).
nextTitle	string	—	Title text for next item (used in "cards" variant).
prevHref	string	—	Href link for previous card/button (optional, enables link mode).
nextHref	string	—	Href link for next card/button (optional, enables link mode).
variant	"numeric" \| "simple" \| "cards"	"numeric"	—
size	"sm" \| "md" \| "lg"	"md"	—