Pagination

Pagination is the numbered pager, which renders nothing at all when there is only one page.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/pagination.tsx

Import from@viliha/vui-react/pagination

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

pagination-demo.tsx

import { Pagination } from "@viliha/vui-react/pagination";

Exports

Everything this family exports. They are read from the source, so this list is what the package actually ships.

Prop	Type	Default
Pagination	component	—

Pagination props

Prop	Type	Default	What it does
page	number	—	The current page, counting from one.
pageCount	number	—	How many pages there are. A pager for a single page renders nothing.
onPageChange	(page: number) => void	—
label?	string	"Pagination"	Names the control for a screen reader. A page has more than one pager often enough that "Pagination" alone stops being an answer to "which one", so the caller says.
steps?	"text" \| "both" \| "icon"	"text"	What the previous and next buttons show. `text` is the words alone and the default, so no caller changes. `both` puts an arrow beside them, and `icon` drops the words.
className?	string	—

Customize

Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.