Pagination

Pagination helps users navigate through large datasets by splitting content into discrete pages. It provides intuitive controls for moving between pages and jumping to specific pages.

Basic Usage

import { Pagination } from '@/components'

const [page, setPage] = useState(5)

<Pagination page={page} totalPages={30} onPageChange={setPage} />

Variants

Square (Default)

Page buttons with square corners and subtle borders.

<Pagination page={page} totalPages={30} onPageChange={setPage} variant="square" />

Circle

Page buttons with fully rounded corners.

<Pagination page={page} totalPages={30} onPageChange={setPage} variant="circle" />

Transparent

Minimal page buttons without backgrounds, active page indicated by blue text and dot.

<Pagination page={page} totalPages={30} onPageChange={setPage} variant="transparent" />

Number

Simplified layout with only navigation arrows and page indicator text.

<Pagination page={page} totalPages={30} onPageChange={setPage} variant="number" />

Configuration Options

Hide Page Selector

Remove the "Go to page" dropdown.

<Pagination page={page} totalPages={30} onPageChange={setPage} showPageSelector={false} />

Hide Page Indicator

Remove the "Page X of Y" text.

<Pagination page={page} totalPages={30} onPageChange={setPage} showIndicator={false} />

Minimal

Hide both the page indicator and page selector for a compact pagination.

<Pagination
  page={page}
  totalPages={30}
  onPageChange={setPage}
  showIndicator={false}
  showPageSelector={false}
/>

Few Pages

When total pages fit within the display, all pages are shown without ellipsis.

<Pagination page={page} totalPages={5} onPageChange={setPage} />

Sibling Count

Control how many page numbers appear on each side of the current page.

<Pagination page={page} totalPages={30} onPageChange={setPage} siblingCount={2} />

Controlled

The pagination component is fully controlled. Manage the current page state externally.

const [page, setPage] = useState(1)

<Pagination page={page} totalPages={30} onPageChange={setPage} />

All Variants

Accessibility

• Uses semantic <nav> element with aria-label="Pagination"
• Page buttons have aria-label for screen readers
• Active page is marked with aria-current="page"
• Navigation buttons are disabled and marked as such when at boundaries
• Keyboard navigation is fully supported through the page selector

API Reference

Pagination Props