Pagination
Real links that work on the server and in the browser.
Page 1 of 10
Usage
import { Pagination } from '@fwenthehunter/friendly-ui';
<Pagination page={3} totalPages={20}
href={page => '/articles?page=' + page}
previousLabel="← Previous" nextLabel="Next →" />Pass the current page, total pages, and a URL builder. Previous and Next become disabled text at the edges. The current link uses aria-current="page"; distant ranges collapse into ellipses. Customize nextLabel and previousLabel with text or React elements. For an icon-only label, include accessible text or an accessible SVG name. These labels also appear at disabled edges.
Page numbers must be integers with totalPages at least 1 and page within range. Do not render pagination for an empty result set. The href callback runs on the server when used in a Server Component, so it does not cross a client boundary. Include your app’s base path in generated URLs if applicable.
The preview intercepts ordinary clicks in a client wrapper to demonstrate local state. The package produces plain anchors and does not depend on a router.
Props
Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.
| Prop | Type | Default |
|---|---|---|
page / totalPages | positive integers | required |
href | (page: number) => string | required |
siblingCount | number, bounded to 0–5 | 1 |
nextLabel | ReactNode | Next |
previousLabel | ReactNode | Previous |