Pagination — Playground
variant
size
messages
State
<kui-pagination [(currentPage)]="page" [totalPages]="20" />Pagination events
- No events yet.
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'full' | 'compact' | 'simple' | undefined | undefined | Layout preset (defaults.pagination.variant, then compact). compact is First, Prev, numbers with ellipsis, Next and Last; simple is Prev, "Page X of Y" and Next; full adds the summary and the rows-per-page picker. |
| size | 'xs' | 'sm' | 'md' | 'lg' | undefined | undefined | Control size on the Button scale. Falls back to the root defaults.size, then md. |
| totalPages | number | - | Required total page count. Static numeric values are coerced; an invalid or non-positive value uses 1. |
| [(currentPage)] | number | 1 | Current page, 1-based. A plain two-way model, not a form value, so pagination is never placed in kui-field. An out-of-range binding is clamped. |
| siblingCount | number | undefined | undefined | Page numbers shown beside the current page before an ellipsis (defaults.pagination.siblingCount, then 1). |
| boundaryCount | number | undefined | undefined | Page numbers always shown at each edge (defaults.pagination.boundaryCount, then 1). |
| [(pageSize)] | number | 25 | Rows per page, used by the full variant. Changing the picker sets pageSize and resets currentPage to 1 in the same update. |
| pageSizeOptions | readonly number[] | undefined | undefined | Choices of the rows-per-page picker, full variant only (defaults.pagination.pageSizeOptions, then [10, 25, 50, 100]). |
| totalItems | number | undefined | totalPages * pageSize | Total item count for the "Showing X-Y of Z" summary, full variant only. |
| disabled | boolean | false | Disables every control with the native attribute, removing them from the tab order. |
| ariaLabel | string | undefined | undefined | Accessible name of the nav landmark. Falls back to the pagination.label message (Pagination). |
| messages | Partial<KuiPaginationMessages> | undefined | undefined | Per-instance text overrides: button names, rowsPerPage, summary and page. They win over scoped and root messages. |
| (currentPageChange) | number | - | Emitted whenever currentPage changes (model output). |
| (pageSizeChange) | number | - | Emitted whenever pageSize changes (model output). |
| --kui-pagination-gap / -summary-gap / -ellipsis-color | CSS custom properties | - | Gap between the controls, gap between the summary row and the controls, and the ellipsis and secondary text colour. |
| --kui-pagination-page-min-size-{xs,sm,md,lg} / -page-size-width | CSS custom properties | - | Square size of the page-number buttons per size and the fixed width (76px) of the rows-per-page picker. |
| KuiPaginationOptions | interface | - | Shape of defaults.pagination: variant, siblingCount, boundaryCount, pageSizeOptions and the four step icons. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.