Pagination

Import

import { Pagination } from '@delightstack/components';

Basic Usage

Current page: 1

View code

<script>
  import { Pagination } from '@delightstack/components';

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

<Pagination bind:page total_pages={10} />

Examples

Simple Mode

A minimal prev/next layout with “Page X of Y” text.

Current page: 1

View code

<Pagination bind:page total_pages={10} simple />

Compact Mode

An even more minimal layout with just arrows and “X / Y”.

Current page: 1

View code

<Pagination bind:page total_pages={10} compact />

Page Size Selector

Show a dropdown to change the number of items per page.

Page 1, showing 25 per page

View code

<script>
  import { Pagination } from '@delightstack/components';

  let page = $state(1);
  let page_size = $state(25);
</script>

<Pagination
  bind:page
  bind:page_size
  total_pages={40}
  show_page_size
  page_size_options={[10, 25, 50, 100]}
  onpagesizechange={() => {
    page = 1;
  }}
/>

Item Range Info

Show “Showing X-Y of Z” alongside pagination.

View code

<Pagination bind:page total_pages={20} total_items={500} page_size={25} show_info />

Custom Ellipsis Behavior

Control how many sibling and boundary pages are visible.

sibling_count=2, boundary_count=2

View code

<Pagination bind:page total_pages={50} sibling_count={2} boundary_count={2} />

Sizes

Size "0" (small)

Size "2" (medium)

Size "3" (large)

View code

<Pagination bind:page total_pages={10} size="0" />  <!-- Small -->
<Pagination bind:page total_pages={10} size="2" />  <!-- Medium -->
<Pagination bind:page total_pages={10} size="3" />  <!-- Large -->

Skeleton Loading

View code

<!-- total_pages is known, so the skeleton mirrors the same page count -->
<Pagination skeleton={loading} bind:page total_pages={5} />

Props

Prop	Type	Default	Description
`page`	`number`	`1`	Current page number, 1-based (`$bindable`)
`total_pages`	`number`	required	Total number of pages
`total_items`	`number`	`undefined`	Total number of items (used for info display)
`page_size`	`number`	`10`	Number of items per page (`$bindable`)
`page_size_options`	`number[]`	`[10, 25, 50, 100]`	Options for the page size selector
`simple`	`boolean`	`false`	Simple mode: prev/next with “Page X of Y”
`compact`	`boolean`	`false`	Compact mode: minimal prev/next with “X / Y”
`show_page_size`	`boolean`	`false`	Show a page size selector
`show_info`	`boolean`	`false`	Show item range info (“Showing X-Y of Z”)
`sibling_count`	`number`	`1`	Number of sibling pages to show around the current page
`boundary_count`	`number`	`1`	Number of pages to always show at the start and end
`size`	`'0' \| '1' \| '2' \| '3'`	`'1'`	Size of the pagination buttons
`skeleton`	`boolean`	`false`	Show skeleton placeholder
`id`	`string`	auto	Element ID
`class`	`string`	`''`	Additional CSS classes

Events

Event	Detail	Description
`onchange`	`{ page: number }`	Fires when the page changes
`onpagesizechange`	`{ page_size: number }`	Fires when the page size changes

Accessibility

Uses <nav> with aria-label="Pagination"
Page buttons are <button> elements with aria-label="Page N"
Current page button has aria-current="page"
Prev/next buttons have aria-label="Previous page" / aria-label="Next page"
Disabled buttons (first/last page) have disabled attribute
Ellipsis markers are aria-hidden="true"
Page size selector has aria-label="Items per page"
Focus-visible outlines on all interactive elements