Components / core

Pagination

Zero-Padded Rail, Amber Current Page, Arrow Nav

01 Preview

02 Usage

Zero-padded page rail with arrow-glyph prev/next. Amber marks the current page.

<Pagination page={page} total={9} onChange={setPage} />

Controlled only: pass page + onChange. siblings sets how many numbers flank the current page before collapsing to an ellipsis; prevLabel/nextLabel retitle the nav controls.

03 Props

PropTypeDefaultNotes
page number 1 Current page, 1-indexed.
total number 1 Total number of pages.
siblings number 1 Page numbers shown on each side of the current page before collapsing to an ellipsis.
onChange (page: number) => void — Called with the target page number when a page or nav control is activated.
prevLabel string Prev Previous-control label.
nextLabel string Next Next-control label.

Also accepts every attribute of Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Pagination } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';