BasePagination

Moving between pages of a list.

Import it from rei-kit/web: import { BasePagination } from 'rei-kit/web'

Open BasePagination in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { BasePagination } from 'rei-kit/web'

const page = ref(1)
</script>

<template>
  <BasePagination
    :page="page"
    :pages="12"
    previous-label="Previous"
    next-label="Next"
    label="Pages"
    @change="page = $event"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`page`	`number`	yes	Current page, 1-based.
`pages`	`number`	yes	How many there are.
`siblings`	`number`	1	How many numbers to show either side of the current one.
`label`	`string`	''	Accessible name for the landmark.
`previousLabel`	`string`	yes	Names for the arrows, already translated. Required, because `‹` is a glyph and not a word: a screen reader reading the arrow announces nothing a person can act on.
`nextLabel`	`string`	yes

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub