Pagination
Navigate through paged content with previous/next controls, page numbers, and ellipsis indicators. Supports keyboard navigation, edge buttons, and bindable page state.
Playground
Experiment with different props in real-time.
Current page: 1
Basic Usage
Pass a total count to render pagination controls.
<script lang="ts">
import { Pagination } from 'sv5ui';
</script>
<Pagination total={100} />Sizes
Use the size prop to change the pagination dimensions.
<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
Set the activeColor prop to change the active page indicator color.
<Pagination total={100} activeColor="primary" />
<Pagination total={100} activeColor="secondary" />
<Pagination total={100} activeColor="success" />
<Pagination total={100} activeColor="error" />Show Edges
Enable showEdges to display first and last page buttons (« and »).
<!-- Without showEdges -->
<Pagination total={100} defaultPage={5} />
<!-- With showEdges — adds first/last buttons -->
<Pagination total={100} defaultPage={5} showEdges />With Sibling Count
Control how many pages appear on each side of the current page with siblingCount.
<Pagination total={200} siblingCount={2} />Disabled
Disable all interaction with the pagination controls.
<Pagination total={100} disabled />Controlled
Use bind:page to control and display the current page.
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 between pages |
ellipsisIcon | Icon inside ellipsis indicator |
prev | Previous page button |
prevIcon | Icon inside previous page button |
next | Next page button |
nextIcon | Icon inside next page button |
first | First page button |
firstIcon | Icon inside first page button |
last | Last page button |
lastIcon | Icon inside last page button |
Snippets
Use Svelte 5 snippets to customize specific parts of the Pagination.
| Snippet | Type | Description |
|---|---|---|
firstSlot | Snippet | Custom first page button content |
prevSlot | Snippet | Custom previous page button content |
nextSlot | Snippet | Custom next page button content |
lastSlot | Snippet | Custom last page button content |
ellipsisSlot | Snippet | Custom ellipsis indicator content |
itemSlot | Snippet | Custom individual page button content |
Props
| Prop | Type | Default |
|---|---|---|
page | number | 1 |
defaultPage | number | 1 |
total | number | 0 |
itemsPerPage | number | 10 |
siblingCount | number | 1 |
showEdges | boolean | false |
showControls | boolean | true |
disabled | boolean | false |
onPageChange | (page: number) => void | - |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
activeColor | Color | 'primary' |
firstIcon | string | 'lucide:chevrons-left' |
prevIcon | string | 'lucide:chevron-left' |
nextIcon | string | 'lucide:chevron-right' |
lastIcon | string | 'lucide:chevrons-right' |
ellipsisIcon | string | 'lucide:ellipsis' |
class | string | - |
ui | Record<Slot, Class> | - |