Pagination

Page navigation with optional rows-per-page selector for data tables and lists.

Open in Storybook

Interactive Demo

Current page: 1

Usage

vue

<script setup>
import { ref } from 'vue';
import { Pagination } from '@yellowcard/b2b-design-system';

const page = ref(1);
</script>

<template>
  <Pagination v-model="page" :totalPages="10" :totalResults="100" />
</template>

API Reference

Props

Prop	Type	Default	Description
`modelValue`	`number`	—	Current page (v-model)
`totalPages`*	`number`	—	Total number of pages
`totalResults`	`number`	—	Total result count
`rowsPerPage`	`number`	—	Items per page
`showRowsPerPage`	`boolean`	`false`	Show rows-per-page selector
`rowsPerPageOptions`	`number[]`	—	Available row count options
`maxVisiblePages`	`number`	—	Max page buttons shown
`previousLabel`	`string`	—	Previous button label
`nextLabel`	`string`	—	Next button label

Events

Event	Payload	Description
`update:modelValue`	`number`	Page changed