Pagination

A flexible pagination component with variants, sizes, shapes, custom labels and support for large page ranges and real-world data tables.

Basic usage

At minimum, provide the total number of pages and the current page. Use controlled state with currentPage and onPageChange for interactive UIs.

Variants

Use the variant prop to change the appearance of the pagination component. Common options include default, primary, secondary, outlined and minimal.

Sizes

Adjust density using the size prop. Use sm for compact, md for defaults and lg for prominent pagination controls.

Shapes

Use the shape prop to control rounding:rounded, square or pill.

Interactive pagination

Use controlled state to respond to page changes and update surrounding UI such as labels or data tables.

Large page ranges & ellipsis

For large sets, configure siblingCount to show nearby pages with ellipsis when ranges are truncated.

Custom labels & controls

Override text for first, last, previous and next labels or hide specific controls for simplified pagination UIs.

Disabled

Use the disabled prop to render non-interactive pagination, useful while loading or when no data is available.

Real-world example: data table

Combine pagination with a data table to paginate over records. Here, 10 rows are shown per page out of 100 mock users.