Components / Pagination
Pagination
Page navigation with prev/next arrows, smart ellipsis gaps, accent-highlighted current page, 3 size variants, configurable siblings, press-scale feedback, and mobile responsive.
navigationv0.5.0
Playground
Examples
Basic
<cg-pagination total="20" current="5"></cg-pagination>Sizes
<cg-stack gap="md"><cg-pagination total="10" current="3" size="sm"></cg-pagination><cg-pagination total="10" current="3" size="md"></cg-pagination><cg-pagination total="10" current="3" size="lg"></cg-pagination></cg-stack>Import
import { CgPagination } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-pagination';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
total | number | 1 | Total number of pages |
current | number | 1 | Current active page |
siblings | number | 1 | Number of pages shown around current |
size | "sm" | "md" | "lg" | "md" | Button size — sm (28px), md (36px), lg (44px) |
showFirst | boolean | true | Always show first page number |
showLast | boolean | true | Always show last page number |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
cg-page-change | {page: number} | When a page button is clicked |