Navigation
Pagination
Pages of a list: the arrows around the page numbers, the current one marked, long runs cut to the first, the last and the current's neighbours in seven slots, so the row never changes width. Compact says “Page 3 of 12” instead.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { Pagination } from "@nibapp/ui/components/pagination";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
Pagination
Pages of a list: the previous and next arrows around the page numbers, the current one marked (`aria-current="page"`), long runs cut to the first, the last and the current's neighbours. A `<nav>` landmark; the arrows point the way the page reads, right to left too.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | |
| page (required) | number | — | The page shown, from 1. |
| pageCount (required) | number | — | |
| onPageChange (required) | (page: number) => void | — | |
| compact | boolean | false | "Page 3 of 12" between the arrows, for a narrow place: no page buttons. |
Also takes the props of a <nav> element, except onChange and children.