Pagination

Navigate between pages of tabular data, lists, or search results.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Pagination to navigate multi-page content. Connect it to DataTable rendering state when used with a table. Changing a page and requesting data are separate responsibilities; Pagination does not fetch data.

page starts at 1. total is the number of pages, not the number of records. Connect onPageChange to page state.
pageSizeOptions supplies per-page choices, and pageSize can be bound. The page or DataTable owns data requests and total-page calculation.
The default navigation name follows LocaleProvider; an explicit ariaLabel takes priority. Page numbers, page size and responsibility for business requests are unchanged.

Import

import { Pagination } from '@snowui-design-system/components';

Usage

Long range

Responsive

Variants

Width modes

Page size position

Unavailable pages

API Reference

Property	Type	Default	Example	Description
`page`	`number`	`1`	`page={42}`	Current page, starting at 1.
`total`	`number`	`1`	`total={42}`	Total number of pages, not records.
`disabled`	`boolean`	`false`	`disabled`	Disable the entire Pagination control.
`disabledPages`	`number[]`	`[]`	`disabledPages={[2, 5]}`	Disable specified page numbers. Previous and next skip consecutive disabled pages to reach the nearest available page in that direction.
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Accessible name for the root navigation. When omitted, follows LocaleProvider; an explicit value takes priority.
`variant`	`PaginationVariant`	`"outline"`	`variant="gray"`	Button variant for ordinary, previous, and next pages; the current page uses the corresponding emphasized pairing.
`responsive`	`PaginationResponsive`	`"auto"`	`responsive="none"`	auto adapts between full page numbers, an ellipsis, and minimal previous/next controls as width shrinks. none retains the static page window and wrapping behavior.
`widthMode`	`PaginationWidthMode`	`"fill"`	`widthMode={value}`	auto considers remaining space when all pages fit; hug follows content width; fill distributes available width equally, including layouts with an ellipsis.
`gap`	`string \| number`	`—`	`gap="Example"`	Preferred spacing between page numbers and previous/next controls. Numeric values are pixels, with a 4 CSS px effective floor and larger values preserved. Defaults to gap-1.
`pageSize`	`number`	`20`	`pageSize={42}`	Current items per page. Selection updates the bound value. The selector appears only when pageSizeOptions is nonempty.
`pageSizeOptions`	`number[]`	`[]`	`pageSizeOptions={[10, 20, 50]}`	Available items-per-page choices. Nonpositive numbers are ignored and duplicates removed.
`pageSizeGap`	`string \| number`	`16`	`pageSizeGap="Example"`	Separate preferred spacing between pageSize and the page-button group. Numeric values are pixels, with a 4 CSS px effective floor and larger values preserved.
`pageSizeAriaLabel`	`string`	`—`	`pageSizeAriaLabel="Example"`	Accessible name of the items-per-page selector. Defaults to the current LocaleProvider message.
`onPageChange`	`(page: number) => void`	`—`	`onPageChange={(page) => currentPage = page}`	Called when a clickable page selection changes.
`onPageSizeChange`	`(pageSize: number) => void`	`—`	`onPageSizeChange={(size) => pageSize = size}`	Called when items per page changes.
`children`	`Snippet`	`—`	`<Pagination><Button as="current" /><Button as="page" /></Pagination>`	Role-specific visual templates for generated controls.
`parts`	`ComponentPartsOf<{ Button: typeof Button; Listbox: typeof Listbox; MenuItem: typeof MenuItem; }>`	`—`	`parts={{ Button: { radius: 12 } }}`	Configure generated page Buttons, the items-per-page Listbox, and its options. Explicit children role templates configure their own props rather than reading parent parts.