NAVIGATION

Pagination

Pagination selects a page from a known result set and then calls a declared function to load its contents.

PAGE SELECTION

Bind a one-based page

The bound Signal receives the selected page. Pagination never requests, sorts, or slices records itself; keep that work in the declared function and its server endpoint.

Five pages of results

Previous and next stop at the first and final page. Selecting a page updates bind before onChange runs.

Directional controls reuse Dowe Solar Icon geometry. The current page and arrows share the selected variant and scheme, while the remaining numbers stay quiet.

dowe
signal page value:"1"
fn loadResults
  request results method:"GET" route:"/api/results/page/:page"
Pagination bind:page total:50 pageSize:10 onChange:loadResults

VISUAL OPTIONS

Choose a control treatment

Variants change the treatment only. Every variant keeps the same selected-page binding and function dispatch contract.

Solid

Outlined

Soft

Ghost

BEHAVIOR

Keep data loading separate

Use Pagination beside a Table or any result view, but let the function invoked by onChange own the request and update the current result Signal.

The current portable subset renders at most 25 pages. Use a positive static pageSize and a total that stays within that range.

When the range exceeds seven pages, Pagination keeps the first, final, current, and nearby pages visible and condenses the gaps with ellipses.

Authoring rules

Pagination requires bind, total, pageSize, and onChange. It has no visual children. Page numbers begin at 1, and generated targets clamp selections to the available range.

ACCESSIBILITY

Clear page controls

Web output generates semantic navigation controls with labels for previous, next, and the current page. Boundary controls are unavailable when there is no earlier or later page.

Android and iOS generate equivalent native controls with the same clamping and dispatch behavior.

Name the navigation

Set ariaLabel when nearby pagination controls need a more specific description, such as invoice pages or search result pages.

API

Pagination props

Pagination also accepts applicable common layout, spacing, sizing, visibility, and accessibility props.

Prop
Type
Default

No data

There are no records to display