Pagination

A standalone page navigator laid out like DataTable's footer: a tinted band with an optional rows-per-page Select, a range total, and a First · Prev · [page]/N · Next · Last stepper whose page indicator is an editable NumberInput (type a page + Enter to jump). variant tints the band surface + button hover only (not the buttons). Built from Button + Select + NumberInput.

Full (per-page + total)

Page 1, 10/page.

<script>
  import { Pagination } from '@spaethtech/svelte-ui';
  let page = $state(1);
  let perPage = $state(10);
</script>

<Pagination
  bind:page
  bind:perPage
  total={247}
  perPageOptions={[10, 25, 50, 100]}
  showTotal
/>

Compact (stepper only)

No per-page Select or range text — just the stepper. Page 7 of 20.

<!-- Just the stepper: no per-page Select, no range text -->
<Pagination bind:page total={200} showTotal={false} />

Pagination

Full (per-page + total)

Compact (stepper only)

Sizes & variants