Display

Pagination

Navigation between pages of a data set, with a bindable current page.

<script>
  import { Pagination } from "@codeatlasdev/ui";
</script>

<Pagination count={100} perPage={10} bind:page />

count is the total number of items, not the number of pages. Pages are numbered from 1, and the first and last page always show. The nav buttons and page buttons form one keyboard group: arrow keys move between them (wrapping at the ends, mirrored in right-to-left layouts), Home and End jump to the first and last enabled control. The current page has aria-current="page".

Basic

Current page: 1

Code

<script lang="ts">
  import { Pagination } from '@codeatlasdev/ui';

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

<div class="wrap">
  <Pagination count={100} perPage={10} bind:page />
  <p>Current page: {page}</p>
</div>

<style>
  .wrap { display: flex; flex-direction: column; gap: var(--ca-space-3); }
  p { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

More siblings

`siblingCount` controls how many pages show around the current one.

Code

<script lang="ts">
  import { Pagination } from '@codeatlasdev/ui';
</script>

<Pagination count={200} perPage={10} siblingCount={2} />

Few items

Code

<script lang="ts">
  import { Pagination } from '@codeatlasdev/ui';
</script>

<Pagination count={30} perPage={10} />

Props

Prop	Type	Default	Description
`count`	`number`	–	Total number of items to paginate. Required.
`perPage`	`number`	`10`	Items per page.
`page`	`number`	`1`	Current page, 1-based. Bindable.
`siblingCount`	`number`	`1`	Pages shown on each side of the current page.
`onPageChange`	`(page: number) => void`	`undefined`	Called with the new page when the user changes it. It does not fire when you set `page` yourself.
`class`	`string`	`''`	Extra class names.