ComponentsNavigationPagination

Pagination

Page navigation component with 16 variants covering every real-world use case.

16 variantsEllipsisJump to pageTableDotsLoading

Overview

Page navigation component with 16 variants covering every real-world use case.

Default pagination

Live preview

The active page is visually distinct while previous and next controls preserve browsing context.

PaginationExample.tsx
tsx
import { Pagination } from 'omverse-ui'
 
const [page, setPage] = useState(3);
 
<Pagination
page={page}
totalPages={10}
onPageChange={setPage}
/>

Use pagination when a large result set must be split into stable, addressable pages. Keep filters and sort order unchanged while pages change.

Anatomy

  • Input container and button group boundary.
  • Visible page numbers, edge actions, and optional jump input.
  • Optional table row-count selector and range display.
  • Optional previous/next controls and compact states.
Diagram
tsx
Pagination = { controls, prev/next, pages, optional table footer, optional jump }

When to use

  • For paginating long item lists, search results, or data tables.
  • When users need quick access to nearby pages and clear positioning.
  • Where table totals must remain visible and editable.

When not to use

  • Avoid using for short lists that never overflow one screen.
  • Prefer infinite scroll when users rarely need direct page jumps.
  • Do not hide pagination when state changes dramatically on each interaction.

Variants

Choose a variant by style and surface density.

States

Common states include idle, hover, disabled, loading, and compact table states.

Behavior

Keep page controls predictable and focusable; validate jump input boundaries.

Accessibility

  • Preserve keyboard flow and visible focus states.
  • Use clear labels and accessible text for control actions.
  • Keep active page changes announced for assistive users.

Content guidelines

  • Keep button text concise and readable.
  • Use meaningful page-size values in table modes.
  • Keep total item labels stable and obvious.

Examples

Default

Live preview

Solid filled active page button with ellipsis for large page counts

App.tsx
tsx
import { Pagination } from 'omverse-ui'
 
const [page, setPage] = useState(3);
 
<Pagination
page={page}
totalPages={10}
onPageChange={setPage}
/>

All variants

Live preview

Every variant shown with page 3 of 10 — click to navigate

default — Solid filled active page button

outlined — Border on every page button

pill — Rounded pill buttons

simple — Minimal prev / next with page indicator

compact — Tight layout for dense UIs

underline — Underline indicator on active page

floating — Elevated panel with drop shadow

dark — Dark background for dark-mode dashboards

glass-card — Frosted glass panel

vercel — Vercel-style minimal with arrow buttons

notion — Notion-style page selector

linear — Linear-style dense row

github — GitHub-style outlined group

stripe — Stripe dashboard pagination

dots — Dot indicators for carousel or gallery style

segmented — Segmented control style

App.tsx
tsx
// 16 visual variants
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="default" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="outlined" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="pill" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="simple" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="compact" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="underline" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="floating" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="dark" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="glass-card" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="vercel" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="notion" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="linear" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="github" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="stripe" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="dots" />
<Pagination page={page} totalPages={10} onPageChange={setPage} variant="segmented" />

Jump to page

Live preview

showJump adds a numeric input — type a page number and press Enter

App.tsx
tsx
// showJump adds a "Go to page" input
<Pagination
page={page}
totalPages={10}
onPageChange={setPage}
showJump
/>

First and last buttons

Live preview

showFirstLast adds ⏮ and ⏭ jump-to-edge buttons

App.tsx
tsx
// showFirstLast adds ⏮ and ⏭ buttons
<Pagination
page={page}
totalPages={10}
onPageChange={setPage}
showFirstLast
/>

Table variant

Live preview

Rows-per-page selector with item range label — built for data tables

App.tsx
tsx
<Pagination
page={page}
totalPages={10}
onPageChange={setPage}
variant="table"
totalItems={243}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[10, 25, 50, 100]}
onRowsPerPageChange={setRowsPerPage}
/>

Loading state

Live preview

loading prop shows a skeleton placeholder while data is fetching

App.tsx
tsx
// loading shows a skeleton placeholder
<Pagination
page={page}
totalPages={10}
onPageChange={setPage}
loading
/>

Props / API

Api Props

Props

PropTypeDefaultDescription
pagenumber—Current page (1-indexed) — required
totalPagesnumber—Total number of pages — required
onPageChange(page: number) => void—Callback fired when the page changes — required
variant'default' | 'outlined' | 'pill' | 'simple' | 'compact' | 'underline' | 'floating' | 'dark' | 'glass-card' | 'vercel' | 'notion' | 'linear' | 'github' | 'stripe' | 'dots' | 'table' | 'segmented''default'Visual style
siblingsnumber1Number of sibling pages shown around the current page
showFirstLastbooleanfalseShow first and last page buttons
showPrevNextbooleantrueShow previous and next buttons
showJumpbooleanfalseShow a page jump input field
size'sm' | 'md' | 'lg''md'Button size
loadingbooleanfalseShows a skeleton loading state
rowsPerPagenumberundefinedCurrent rows per page (table variant)
rowsPerPageOptionsnumber[]undefinedOptions for rows-per-page selector (table variant)
totalItemsnumberundefinedTotal item count shown as range label (table variant)
onRowsPerPageChange(rows: number) => voidundefinedCallback when rows-per-page changes (table variant)