---
components: ["Pagination", "PaginationSkeleton"]
---

<script>
  import { Pagination, PaginationSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default

<Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />

## Current page

<Pagination totalItems={102} page={4} />

## Custom page sizes

<Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />

## Unknown pages

If the total number of pages is unknown, set `pagesUnknown` to `true`.

This will render the item range text without factoring in the total number of pages.

<Pagination pagesUnknown />

## Page window

The number of native select items rendered is derived from the value of `totalItems`.

If `totalItems` is a very large number, this can impact rendering performance since
thousands of elements may be rendered. By default, the window of rendered items is
capped at 1,000. For example, if `totalItems=100_000` and the `pageSize=10`,
1,000 select options are rendered.

Use the `pageWindow` prop to increase this value.

<Pagination totalItems={100_000} pageSizes={[10, 15, 20]} />

## Hidden page input

<Pagination totalItems={102} pageInputDisabled />

## Hidden page size

<Pagination totalItems={102} pageSizeInputDisabled />

## Skeleton

<PaginationSkeleton />