Navigation and interaction

Pagination

Previous, numbered, and next page navigation.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Pagination } from "@cofob/design-system-react";

/**
 * Complete Pagination parameter reference.
 * @param page/currentPage
 *   type: number
 *   required
 *   example: 3
 * @param totalPages/items
 *   type: number (Svelte) | PaginationItem[] (React)
 *   required
 *   example: 12 / {items}
 * @param previousHref/nextHref
 *   type: string (React)
 *   default: —
 *   example: "/guide"
 * @param onPageChange
 *   type: (page: number) => void
 *   default: —
 *   example: {handlePageChange}
 * @param label
 *   type: string | renderable content
 *   default: "Pagination"
 *   example: "Accessible label"
 * @param nav attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function PaginationExample() {
  return (
    <Pagination currentPage={1} items={items} />
  );
}

Svelte

<script lang="ts">
  import { Pagination } from "@cofob/design-system-svelte";

  // Complete Pagination parameter reference.
  // page/currentPage
  //   type: number
  //   required
  //   example: 3
  // totalPages/items
  //   type: number (Svelte) | PaginationItem[] (React)
  //   required
  //   example: 12 / {items}
  // getHref
  //   type: (page: number) => string (Svelte)
  //   default: —
  //   example: "/guide"
  // siblingCount
  //   type: number (Svelte)
  //   default: 1
  //   example: 2
  // onPageChange
  //   type: (page: number) => void
  //   default: —
  //   example: {handlePageChange}
  // label
  //   type: string | renderable content
  //   default: "Pagination"
  //   example: "Accessible label"
  // nav attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Pagination bind:page totalPages={12} />

HTML

<!--
  Complete Pagination parameter reference.
  page/currentPage
    type: number
    required
    example: 3
  totalPages/items
    type: number (Svelte) | PaginationItem[] (React)
    required
    example: 12 / {items}
  previousHref/nextHref
    type: string (React)
    default: —
    example: "/guide"
  getHref
    type: (page: number) => string (Svelte)
    default: —
    example: "/guide"
  siblingCount
    type: number (Svelte)
    default: 1
    example: 2
  onPageChange
    type: (page: number) => void
    default: —
    example: {handlePageChange}
  label
    type: string | renderable content
    default: "Pagination"
    example: "Accessible label"
  nav attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<nav class="cf-pagination" aria-label="Pagination">…</nav>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-pagination`
Adapters	Native · React · Svelte
Primary props	page/currentPage · totalPages/items · previousHref/nextHref · getHref · siblingCount · onPageChange · label · nav attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`page/currentPage`required	`number`	`required`	React · Svelte · HTML	`3`	Current page; bindable in Svelte and controlled in React.
`totalPages/items`required	`number (Svelte) \| PaginationItem[] (React)`	`required`	React · Svelte · HTML	`12 / {items}`	Defines the page range in Svelte or explicit navigation items in React.
`previousHref/nextHref`	`string (React)`	`—`	React · HTML	`"/guide"`	Explicit React destinations for adjacent pages.
`getHref`	`(page: number) => string (Svelte)`	`—`	Svelte · HTML	`"/guide"`	Builds Svelte page links without coupling to a router.
`siblingCount`	`number (Svelte)`	`1`	Svelte · HTML	`2`	Number of page links around the active Svelte page.
`onPageChange`	`(page: number) => void`	`—`	React · Svelte · HTML	`{handlePageChange}`	Runs before client-side page navigation.
`label`	`string \| renderable content`	`"Pagination"`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`nav attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.