Pagination

Used to navigate through a series of pages.

Demo

React
Vue

Size

Color scheme

Usage

React
Vue

import { useState } from 'react';
import { Pagination } from '@fintech-sandpit/ui/react';

const [page, setPage] = useState(3);

return (
  <Pagination
    page={page}
    pageSize={20}
    count={1000}
    siblingCount={3}
    onPageChange={({ page }) => setPage(page)}
  />
);

<script setup lang="ts">
import { ref } from 'vue';
import { Pagination } from '@fintech-sandpit/ui/vue';

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

<template>
  <Pagination
    v-model:page="page"
    :page-size="20"
    :count="1000"
    :sibling-count="3"
  />
</template>

Props

React
Vue

Name	Type	Default	Description
`page`	`number`	`1`	Current page
`pageSize`	`number`	`10`	Page size
`count`	`number`		Total count
`siblingCount`	`number`		Sibling count
`variant`	`ButtonVariant`	`solid`	Button variant
`size`	`Size`	`md`	Button size
`colorScheme`	`ColorScheme`	`neutral`	Button color scheme

Name	Type	Default	Description
`page`	`number`	`1`	Current page ¹
`page-size`	`number`	`10`	Page size ²
`count`	`number`		Total count
`sibling-count`	`number`		Sibling count
`variant`	`ButtonVariant`	`solid`	Button variant
`size`	`Size`	`md`	Button size
`color-scheme`	`ColorScheme`	`neutral`	Button color scheme

The page prop is a model value.
The page-size prop is a model value.

Name	Payload	Description
`onPageChange`	`PageChangeDetails`	Page details

Event name	Payload	Description
`update:page`	`number`	Page number changed
`update:page-size`	`number`	Page size changed

Types

type PageChangeDetails = {
  page: number;
  pageSize: number;
}

type ButtonVariant = 'solid' | 'subtle' | 'outline' | 'ghost' | 'unstyled'
type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'