Pagination
Page-number navigation for tables and lists, with smart ellipsis collapsing for large page counts.
API
All inputs and configuration options for zyra-pagination.
| Prop | Type | Default | Description |
|---|---|---|---|
totalPages | number | 1 | Total number of pages |
currentPage | number | 1 | The currently active page |
siblingCount | number | 1 | Page numbers shown on each side of the current page before collapsing |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the pagination controls |
disabled | boolean | false | Disables all navigation controls |
Tokens
CSS custom properties zyra-pagination reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Border--zyra-color-border-color | var(--zyra-color-border) | Border color of each page button in its resting state. |
Background--zyra-color-surface-inset | var(--zyra-color-bg-surface) | Fill color of each page button in its resting state. |
Text--zyra-color-foreground | var(--zyra-color-text) | Label color of a resting page button. |
Hover background--zyra-color-surface-raised | var(--zyra-color-bg-raised) | Fill color of a page button on hover. |
Hover border--zyra-color-border-hover | tuned per theme | Border color of a page button on hover. |
Active background--zyra-color-primary-subtle | var(--zyra-color-accent-muted) | Fill color of the current page button. |
Active text/border--zyra-color-primary | var(--zyra-color-accent) | Text, border, and focus-outline color of the current page button. |
Active border--zyra-color-primary-border | var(--zyra-color-accent-border) | Border color of the current page button. |
Ellipsis--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Color of the collapsed-range ellipsis. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Rendered inside a nav element with aria-label="Pagination"
- The active page button has aria-current="page"