Pagination v0.1.0 Navigation

Page navigation with sibling windows and ellipsis collapsing (logic lives in latticeui-core).

import { Pagination } from "latticeui-react";

Examples

Basic

page: 3

Show code

<Pagination count={10} defaultPage={3} onPageChange={setPage} />

Many pages

Distant ranges collapse into ellipses; siblings controls the window width.

Show code

<Pagination count={50} defaultPage={25} siblings={2} />

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`nav`	`[data-scope="pagination"][data-part="root"]`
`list`	`ul`	`[data-scope="pagination"][data-part="list"]`
`item`	`button`	`[data-scope="pagination"][data-part="item"]`
`ellipsis`	`span`	`[data-scope="pagination"][data-part="ellipsis"]`
`prev`	`button`	`[data-scope="pagination"][data-part="prev"]`
`next`	`button`	`[data-scope="pagination"][data-part="next"]`

Props

Prop	Type	Default	Description
`count` *	`number`	—	Total pages.
`page / defaultPage`	`number`	—
`onPageChange`	`(page: number) => void`	—
`siblings`	`number`	`1`

Accessibility

Roles: navigation

Current page is marked aria-current=page.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="pagination"][data-part="item"] {
  /* your overrides */
}

State attributes: aria-current="page"