Pagination

Navigation controls for browsing paginated content.

Overview

Pagination renders a row of page number buttons with previous/next controls. It is a controlled component; the parent manages the current page via page and onChange. The number of visible page buttons can be configured with maxVisible.

Use Pagination for navigating large data sets split across pages.
The default maxVisible of 5 is suitable for most layouts — reduce it for narrow containers or mobile views.
Combine with data tables or list components for a complete paginated interface.

Accessibility

Renders inside a <nav> element for landmark navigation.
The current page button has aria-current="page", communicating the active page to screen readers.
Previous and Next buttons are automatically disabled at the first and last pages respectively.
Each page button is keyboard-focusable with Tab and activatable with Enter or Space.

Import

import { Pagination } from "@cocso-ui/react";

Default

Pass page, totalPages, and onChange to render a basic paginator. By default, up to 5 page buttons are shown at a time.

Page 1 of 10

Max Visible

Set maxVisible to adjust the number of page buttons shown at once. Ellipses (…) are inserted automatically when the total exceeds the visible range.

Page 1 of 10

API Reference

Pagination

Prop	Type	Default	Description
`page*`	`number`	-	The current active page number (1-based). This is a controlled value — update it in the `onChange` callback.
`totalPages*`	`number`	-	Total number of pages. Determines the range of page buttons and ellipsis behavior.
`onChange*`	`(pageNumber: number) => void`	-	Callback invoked when the user clicks a page number or the previous/next buttons. Receives the target page number.
`maxVisible`	`number`	`5`	Maximum number of page buttons shown before ellipses are inserted. Reduce for narrow containers; increase for wide layouts.