Navigation

Pagination

Navigate through pages of content. Supports sizes, colors, edge buttons, sibling count, items per page, and controlled state.

Playground

Experiment with different props in real-time.

Total

Items Per Page

Size

Active Color

Show Edges

Disabled

Basic Usage

Provide total to generate page controls.

<script lang="ts">
  import { Pagination } from 'sv5ui';
</script>

<Pagination total={100} />

Sizes

5 button sizes.

<Pagination total={100} size="xs" />
<Pagination total={100} size="sm" />
<Pagination total={100} size="md" />
<Pagination total={100} size="lg" />
<Pagination total={100} size="xl" />

Colors

Customize the active page button color.

primary

secondary

success

error

<Pagination total={100} activeColor="primary" />
<Pagination total={100} activeColor="secondary" />
<Pagination total={100} activeColor="success" />
<Pagination total={100} activeColor="error" />

Button Variants

Change the navigation button variant.

ghost

outline

soft

<!-- Ghost buttons (default) -->
<Pagination total={100} variant="ghost" />

<!-- Outline buttons -->
<Pagination total={100} variant="outline" />

<!-- Soft buttons -->
<Pagination total={100} variant="soft" />

Show Edges

Add first/last page buttons with showEdges.

Without showEdges

With showEdges

<!-- Without showEdges -->
<Pagination total={100} defaultPage={5} />

<!-- With showEdges — adds first/last buttons -->
<Pagination total={100} defaultPage={5} showEdges />

Sibling Count

Control how many pages appear adjacent to the current page.

siblingCount=1

siblingCount=2

siblingCount=3

<!-- Default siblingCount=1 -->
<Pagination total={200} defaultPage={5} />

<!-- siblingCount=2 — shows more page numbers -->
<Pagination total={200} defaultPage={5} siblingCount={2} />

<!-- siblingCount=3 -->
<Pagination total={200} defaultPage={5} siblingCount={3} />

Items Per Page

Control how many items each page represents.

10 per page → 10 pages

20 per page → 5 pages

5 per page → 20 pages

<!-- 10 items per page (default) — 10 total pages -->
<Pagination total={100} itemsPerPage={10} />

<!-- 20 items per page — 5 total pages -->
<Pagination total={100} itemsPerPage={20} />

<!-- 5 items per page — 20 total pages -->
<Pagination total={100} itemsPerPage={5} />

Disabled

Disable all pagination controls.

<Pagination total={100} disabled />

Controlled

Use bind:page for two-way binding.

Current page: 1

<script lang="ts">
  import { Pagination } from 'sv5ui';

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

<p>Current page: {page}</p>
<Pagination total={100} bind:page />

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Root pagination container`
`list`	`Page items list wrapper`
`item`	`Individual page button`
`ellipsis`	`Ellipsis indicator`
`first`	`First page button`
`prev`	`Previous page button`
`next`	`Next page button`
`last`	`Last page button`

Snippets

Snippet	Props	Description
`itemSlot`	`page, selected`	`Custom page button`
`firstSlot`	`page, disabled`	`Custom first page button`
`prevSlot`	`page, disabled`	`Custom previous button`
`nextSlot`	`page, disabled`	`Custom next button`
`lastSlot`	`page, disabled`	`Custom last page button`
`ellipsisSlot`	`-`	`Custom ellipsis indicator`

Props

Prop	Type	Default	Description
`page`	`number`	`1`	`Current page (bindable)`
`total`	`number`	`0`	`Total items to paginate`
`itemsPerPage`	`number`	`10`	`Items per page`
`siblingCount`	`number`	`1`	`Pages shown adjacent to current`
`showEdges`	`boolean`	`false`	`Show first/last buttons`
`showControls`	`boolean`	`true`	`Show prev/next buttons`
`disabled`	`boolean`	`false`	`Disable all controls`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Button size`
`variant`	`ButtonVariant`	`'ghost'`	`Nav button variant`
`color`	`ButtonColor`	`'surface'`	`Nav button color`
`activeVariant`	`ButtonVariant`	`'solid'`	`Active page variant`
`activeColor`	`ButtonColor`	`'primary'`	`Active page color`
`onPageChange`	`(page) => void`	`-`	`Callback on page change`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Breadcrumb Tabs