Pagination

A component for navigating through a series of related content across multiple pages.

Props

Prop	Type	Default	Description
`currentPage`	`number`	`1`	The currently active page. Supports $bindable.
`totalPages`	`number`	`1`	The total number of pages.
`onPageChange`	`(page: number) => Promise<void>`	`undefined`	Async callback triggered when the page changes.
`variant`	`string`	`''`	Custom variant class for theming.
`componentId`	`string`	`crypto.randomUUID()`	The unique identifier for the component wrapper.

A component for navigating through a series of related content across multiple pages.

Standard pagination with page numbers and navigation buttons.

Current Page: 1

<script>

  import { Pagination } from 'fluid-ui-svelte/components';

  let currentPage = $state(1);

</script>

<Pagination

  bind:currentPage

  totalPages={10}

  onPageChange={async (page) => {

    console.log('Page changed to:', page);

}}

/>