Navigates through paged data sets. Automatically generates ellipsis for large page counts.
Preview
Code
VUE
<Pagination />Props
The current active page (v-model)
Total number of pages
Number of sibling pages shown around the current page
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
modelValue | number | 1 | — | The current active page (v-model) |
total | number | 10 | — | Total number of pages |
sibling | number | 1 | — | Number of sibling pages shown around the current page |
Usage
Use pagination for data sets where the user needs to browse through pages. Show total page count when possible. For infinite scroll or load-more patterns, pagination is not the right choice.
Accessibility
Wrapped in a <nav> with aria-label="Pagination".
Current page button has aria-current="page".
Each page button has an aria-label describing the destination.
Disabled prev/next buttons use the disabled attribute.