Pagination

<Pagination>TailwindCSS ModulesProduction Stable

Navigate large collections with numbered pages, record summaries, and optional page-size controls. A controlled component for tables, search results, and activity feeds.

InstallationColoxo CLI
npx coloxo add pagination --style coloxo-css
ES Module ImportPlayground / npm package
import { Pagination } from '@coloxo/ui';

Design Tokens:

--cx-color-bg-brand-solid--cx-color-border-primary--cx-control-height-sm--cx-radius-md

2. Boundary states

Navigation controls disable at the edges of a collection. Try moving between pages to see the available actions change.

First page

Last page

Single page

Empty collection

3. Page size & custom labels

Provide onPageSizeChange to show the Rows selector. Reset the current page when the size changes so the next view starts at the beginning.

Adjustable results per page

4. Interactive Props Configurator

Visual Render CanvasPAGE 1 / 12
tsx
import { useState } from "react";import { Pagination } from "@coloxo/ui";export function PaginatedResults() {  const [page, setPage] = useState(1);  const [pageSize, setPageSize] = useState(10);  return (    <Pagination      page={page}      pageSize={pageSize}      total={120}      onPageChange={setPage}      onPageSizeChange={(size) => {        setPageSize(size);        setPage(1);      }}    />  );}

5. Dark theme

The same navigation controls use semantic colors for dark dashboard surfaces.

Standard navigation
Extended navigation

6. Enterprise layout compositions

Keep pagination close to the collection it controls. This invoice list updates its visible records as you navigate.

Recent invoices

Billing activity across your workspace

24 invoices
InvoiceCustomerAmount
INV-1041Acme Studio$240.00
INV-1042Orbit Analytics$325.00
INV-1043Northstar Labs$410.00
INV-1044Atlas Cloud$495.00

Accessibility

Keyboard navigation

Use Tab to focus page controls and Enter or Space to activate them. Unavailable previous, next, first, and last controls are disabled.

Current page

The navigation landmark is labeled Pagination. The selected page uses aria-current="page" to identify your position.

Descriptive controls

Arrow buttons have accessible names, and the page-size selector has a Rows label. Keep the visible record summary specific to your collection.

Props

NameTypeDefaultDescription
pagenumber—Current page number, starting at 1. Required.
pageSizenumber—Number of records per page. Required; use a positive number.
totalnumber—Total number of records across all pages. Required.
onPageChange(page: number) => void—Required callback for page navigation. Update the controlled page value.
onPageSizeChange(pageSize: number) => void—Shows the Rows selector when provided. Update pageSize and reset page to 1 in this callback.
pageSizeOptionsnumber[][10, 20, 50]Available sizes in the Rows selector.
showFirstLastbooleanfalseShow shortcuts to the first and last pages.
metaLabelstring | ((meta: { start: number; end: number; total: number }) => string)"Showing {start}–{end} of {total}"Record summary template or formatter. Templates support {start}, {end}, and {total} placeholders.
classNamestring—Additional CSS classes applied to the navigation container.