Search results
Move between server-backed result pages while retaining the current query.
Components / Navigation
Pagination
Button-based page navigation with compact sibling and boundary ranges.
Preview
Use cases
Long tables
Keep page controls near the table they update.
Usage example
Vue
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from './components/ui/pagination/Pagination.vue'
const page = ref(4)
const messages = {
navigation: 'Results pages',
previous: 'Previous page',
next: 'Next page',
page: (value: number) => 'Go to page ' + value,
}
</script>
<template>
<Pagination v-model="page" :total-pages="12" :messages="messages" />
</template>More examples
Results pages
Supply messages for every button and bind the current page.
Results pages
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from './components/ui/pagination/Pagination.vue'
const page = ref(1)
const messages = { navigation: 'Search results pages', previous: 'Previous page', next: 'Next page', page: (n: number) => 'Go to page ' + n }
</script>
<template>
<Pagination v-model="page" :total-pages="20" :messages="messages" />
</template>Compact range
Fewer siblings make the control easier to fit in a narrow results column.
Compact range
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from './components/ui/pagination/Pagination.vue'
const page = ref(8)
const messages = { navigation: 'Orders pages', previous: 'Previous', next: 'Next', page: (n: number) => 'Page ' + n }
</script>
<template>
<Pagination v-model="page" :total-pages="35" :sibling-count="0" :boundary-count="1" :messages="messages" />
</template>Key API
The most useful props, models, slots, events, and methods for this component.
| Name | Type | Default or requirement |
|---|---|---|
v-model | number | 1 |
totalPages | number | required |
messages | { navigation; previous; next; page(value) } | required |
siblingCount | number | 1 |
boundaryCount | number | 1 |
disabled | boolean | false |
previous / next / page / ellipsis | slots | built-in content |
The active native button has aria-current="page", unavailable previous and next controls are disabled, and all accessible labels come from the required messages object.
Implementation notes
- Update the displayed result data when page changes; Pagination only manages page selection.
- Reset or clamp the current page when filtering changes the total page count.
Accessibility and localization
- The messages object supplies navigation and button names; the current page has aria-current="page".