Pagination

A composable, accessible Pagination component for modern React applications.

import { Pagination } from '@nofinite/nui';

Interactive Preview

A fully accessible, WAI-ARIA compliant pagination component for navigating through pages. Supports first/prev/next/last controls, arrow key navigation, and gap indicators similar to GitHub-style pagination.

Usage

Basic Pagination

import { Pagination } from '@nofinite/nui';

<Pagination page={1} total={10} onChange={setPage} />;

Sibling Page Control

<Pagination page={page} total={50} siblings={2} onChange={setPage} />

Disabled Pagination

<Pagination page={page} total={10} disabled onChange={setPage} />

Page Generation Logic

The component implements adaptive pagination math:

• Displays all pages when total is small
• Shows ellipsis only when more than 2 pages are hidden
• Maintains first + last page visibility
• Uses sibling window around current page

Generated item types:

Variants

<Pagination page={page} total={10} onChange={setPage} />                 // Default
<Pagination siblings={2} page={page} total={100} onChange={setPage} />   // Extended window
<Pagination disabled page={page} total={10} onChange={setPage} />        // Disabled
<Pagination className="custom" page={page} total={10} onChange={setPage} /> // Styled

Available variants

• default — Standard pagination
• extended — Larger sibling window
• disabled — Interaction blocked
• styled — Custom styling override

Guidelines

• Increase siblings for data-heavy navigation
• Keep default sibling size for compact UI
• Disable pagination during async loading states
• Avoid large sibling counts on small screens

States

Keyboard Interaction

Accessibility

• Semantic <nav> with pagination label
• aria-current="page" for active page
• ARIA labels for navigation buttons
• Focus-visible outline for keyboard users
• Ellipsis hidden from assistive tech via aria-hidden

Best Practices

Do

• Use controlled state for predictable navigation
• Provide meaningful page totals
• Keep sibling count minimal for mobile
• Disable during server pagination fetch
• Maintain visual consistency with design tokens

Don’t

• Hide first/last page in long lists
• Use pagination for small datasets
• Disable without visual feedback
• Overload pagination with extra actions
• Remove focus outline for accessibility

API Reference