Skip to content

Pagination

Pages of a long list, with gaps for long ranges.

Page 4 of 17

pagination.example.svelte

<script lang="ts">
  import { Pagination } from '@onlywin/ui-svelte';

  let page = $state(4);
</script>

<div class="example-stack">
  <Pagination pageCount={17} bind:page />
  <p class="example-note">Page {page} of 17</p>
</div>

Usage

Do

Pair it with a range (1–20 / 340) so readers know the size.

Don’t

Do not page short lists; show them whole.

Accessibility

A nav landmark; every page button is named “Page n”; the current one is aria-current.

Keyboard

Pagination keyboard interactions
Keys	Action
`Enter, Space`	Activate
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Pagination props
Prop	Type	Default	Description
`label`	`string`	—
`onPageChange`	`(page: number) => void`	—
`page`	`number`	`1`	1-based. Bindable in Svelte; `defaultPage` in React.
`pageCount` *required	`number`	—
`siblings`	`number`	`1`