Pagination

Navigation

Navigate between pages of content with previous/next controls, page numbers, and ellipsis for large page counts.

Props

Prop	Type	Default	Description
`modelValue`*	`number`	—	Current page (v-model, 1-indexed).
`total`*	`number`	—	Total number of items.
`perPage`	`number`	`10`	Items per page.
`siblings`	`number`	`1`	Sibling page count on each side.
`showEdges`	`boolean`	`true`	Show first/last page buttons.
`disabled`	`boolean`	`false`	Disable all navigation.

Examples

Interactive

Page 3 of 10

vue

<script setup lang="ts">
const page = ref(1)
</script>

<template>
  <DsPagination v-model="page" :total="100" :per-page="10" />
  <p class="text-sm text-ds-fg-muted mt-2">Page {{ page }} of 10</p>
</template>

Many pages (siblings=2)

Disabled

Skeleton

Use DsPaginationSkeleton as a loading placeholder while content is being fetched.

Default (5 pages)

vue

<DsPaginationSkeleton />

Wide (7 pages)

vue

<DsPaginationSkeleton :pages="7" />

Compact (3 pages)

vue

<DsPaginationSkeleton :pages="3" />

Accessibility

Wraps in a <nav> with aria-label="Pagination".
Active page button has aria-current="page".
Prev/Next arrows have descriptive aria-label.
Disabled state set via disabled attribute on buttons.

NavigationMenu

Tabs