Navigationduskmoonimplemented10 demos

Pagination

Pagination moves through large result sets with page and size controls.

Import@duskmoon-dev/components/pagination

3API sections

12documented props

8behavior scenarios

Key API

currentdefaultCurrentpageSizedefaultPageSizetotalonChange

Usage

When to use

Use it when users need to move between sections, pages, steps, or contextual actions.
Expose current and disabled state so navigation remains clear to keyboard and screen-reader users.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Wayfinding

Covers the route, section, step, or action-list patterns that help users move through an interface.

Current state

Shows selected, active, open, or current props where the component exposes them.

Primary API surface

Pagination is most often configured through `current`, `defaultCurrent`, `pageSize`, `defaultPageSize`.

Covered behavior

Renders total/current/pageSize parity state

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Pagination from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function Example() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Renders total/current/pageSize parity state

test-backed

Pagination scenario from the component test coverage: renders total/current/pagesize parity state.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function PaginationRendersTotalCurrentPageSizeDemo() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Calls onChange with page and pageSize when a page is clicked

test-backed

Pagination scenario from the component test coverage: calls onchange with page and pagesize when a page is clicked.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function PaginationCallsOnChangeWithPageDemo() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Disables prev and next at pagination boundaries

test-backed

Pagination scenario from the component test coverage: disables prev and next at pagination boundaries.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function PaginationDisablesPrevAndNextDemo() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Supports size and className

test-backed

Pagination scenario from the component test coverage: supports size and classname.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function PaginationSupportsSizeAndClassNameDemo() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Renders simple mode with compact input controls

test-backed

Pagination scenario from the component test coverage: renders simple mode with compact input controls.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function PaginationRendersSimpleModeWithDemo() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Renders showTotal with current item range

test-backed

Pagination scenario from the component test coverage: renders showtotal with current item range.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function PaginationRendersShowTotalWithCurrentDemo() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Supports quick jumper

test-backed

Pagination scenario from the component test coverage: supports quick jumper.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function PaginationSupportsQuickJumperDemo() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Supports page size changer

test-backed

Pagination scenario from the component test coverage: supports page size changer.

Source

import "@duskmoon-dev/components/styles.css";
import { Pagination } from "@duskmoon-dev/components/pagination";

export function PaginationSupportsPageSizeChangerDemo() {
  return (<Pagination total={120} current={1} pageSize={10} />);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Pagination total={120} current={1} pageSize={10} />
</div>

<div data-theme="moonlight">
  <Pagination total={120} current={1} pageSize={10} />
</div>

API

The API reference below lists every parsed exported type or interface for Pagination. Start with `current`, `defaultCurrent`, `pageSize`, `defaultPageSize` for common usage.

Types: packages/components/src/components/pagination/Pagination.types.tsScenarios: packages/components/src/components/pagination/Pagination.test.tsx

PaginationPropsinterface extends Omit< ComponentProps<"nav">, "children" | "onChange" >

Prop	Type	Required	Description
`current`	`number`	No	current configures Pagination.
`defaultCurrent`	`number`	No	defaultCurrent configures Pagination.
`pageSize`	`number`	No	pageSize configures Pagination.
`defaultPageSize`	`number`	No	defaultPageSize configures Pagination.
`total`	`number`	No	total configures Pagination.
`onChange`	`(page: number, pageSize: number) => void`	No	onChange configures Pagination.
`disabled`	`boolean`	No	disabled configures Pagination.
`simple`	`boolean`	No	simple configures Pagination.
`showSizeChanger`	`boolean`	No	showSizeChanger configures Pagination.
`showQuickJumper`	`boolean`	No	showQuickJumper configures Pagination.
`showTotal`	`PaginationShowTotal`	No	showTotal configures Pagination.
`size`	`PaginationSize`	No	size configures Pagination.

PaginationSizetype

"sm" | "md" | "lg"

PaginationShowTotaltype

( total: number, range: [number, number], ) => ReactNode