Pagination

Navigate between pages of tabular data. Three variants: numbers, minimal, and with-labels.

import{ Pagination } from "@pepulux/ui"

Numbers variant

Minimal variant

Page 3 of 8

With labels

Props

PropTypeDefaultDescription
totalPages*number—Total number of pages
currentPage*number—Active page (1-indexed)
onPageChange*(page: number) => void—Called when page changes
variant"numbers" | "minimal" | "with-labels""numbers"Layout variant
shape"square" | "circle""square"Page button shape
siblingCountnumber1Pages shown each side of current
Application component → Paginationwww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Move through long data

Show the current page, the first and last page and a few neighbours. Use the minimal variant on small screens or when the total is unknown.