Pagination

Windowed page navigator.

A page navigator with Prev/Next controls and a windowed list of page numbers: it always shows the first and last page plus `siblingCount` pages around the current one, bridging hidden runs with `…`. Give it a `pageCount`, or a `total` item count with `pageSize` to derive the count. `page` is bindable (1-based); the current page is `aria-current="page"`, visually active and inert. Mono numerals, zero radius, `--ss-line` hairlines.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Pagination } from 'dssoca'
  let page = $state(1)
</script>

<Pagination bind:page total={240} pageSize={20} onchange={(p) => load(p)} />
<Pagination bind:page pageCount={20} siblingCount={2} />

Renders a `<nav aria-label="Pagination">` of buttons. Prev is disabled on page 1, Next on the last page; the current page button carries `aria-current="page"` and never re-fires. Ellipses are decorative (`aria-hidden`).

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<nav class="ss-pagination" aria-label="Pagination">
  <button type="button" class="page nav-btn" aria-label="Previous page">
    <span aria-hidden="true">‹</span>
  </button>
  <button type="button" class="page" aria-label="Page 1">1</button>
  <button type="button" class="page active" aria-current="page" aria-label="Page 2">2</button>
  <button type="button" class="page" aria-label="Page 3">3</button>
  <span class="ellipsis" aria-hidden="true">…</span>
  <button type="button" class="page" aria-label="Page 6">6</button>
  <button type="button" class="page nav-btn" aria-label="Next page">
    <span aria-hidden="true">›</span>
  </button>
</nav>

Static: render the current page yourself (or wire the buttons).

Props

Prop	Type	Default	Description
`page`	`number`	`1`	Current page, 1-based (bindable).
`total`	`number`	—	Total item count; combined with `pageSize` to derive the page count.
`pageCount`	`number`	—	Explicit page count; overrides the `total`/`pageSize` computation.
`pageSize`	`number`	`10`	Items per page when deriving the count from `total`.
`siblingCount`	`number`	`1`	Page-number buttons shown on each side of the current page.
`disabled`	`boolean`	`false`	Disable the whole control (every button is inert).
`onchange`	`(page: number) => void`	—	Fired when the page changes (after `page` updates).
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.