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
const [page, setPage] = useState(3);
<Pagination page={page} totalPages={10} onPageChange={setPage} />Simple / Compact Status
<Pagination variant="simple" page={page} totalPages={5} onPageChange={setPage} />Cards Variant (Doc / Content Navigation)
<Pagination
variant="cards"
prevTitle="Foundations Overview"
nextTitle="Typography Overview"
/>Props Specification
| Prop | Type | Default |
|---|---|---|
| page | number | — |
| totalPages | number | — |
| onPageChange | (page: number) => void | — |
| prevLabel | string | — |
| nextLabel | string | — |
| prevTitle | string | — |
| nextTitle | string | — |
| prevHref | string | — |
| nextHref | string | — |
| variant | "numeric" | "simple" | "cards" | "sm" | "numeric" |
| size | "sm" | "md" | "lg" | "md" |