Pagination

A component for navigating through multiple pages of content.

...

Anatomy

Usage

<script>
  import {Pagination} from 'ui-ingredients';
  import {ChevronLeftIcon, ChevronRightIcon} from '$lib/icons';
</script>

<Pagination.Root>
  {#snippet children(context)}
    <Pagination.PrevTrigger>
      <ChevronLeftIcon />
    </Pagination.PrevTrigger>

    {#each context.pages as page, index}
      {#if page.type === 'page'}
        <Pagination.Item value={page.value}>
          {page.value}
        </Pagination.Item>
      {:else}
        <Pagination.Ellipsis {index}>...</Pagination.Ellipsis>
      {/if}
    {/each}

    <Pagination.NextTrigger>
      <ChevronRightIcon />
    </Pagination.NextTrigger>
  {/snippet}
</Pagination.Root>

API Reference

Root

Prop	Default	Description
`boundaryCount`	`1`	`number` Number of pages to show at the beginning and end
`count`		`number` Total number of data items
`defaultPage`	`1`	`number` The initial active page when rendered. Use when you don't need to control the active page of the pagination.
`defaultPageSize`	`10`	`number` The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination.
`getPageUrl`		`(details: PageUrlDetails) => string` Function to generate href attributes for pagination links. Only used when `type` is set to "link".
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; ellipsis(index: number)?: string; prevTrigger?: string; nextTrigger?: string; item(page: number)?: string; }` The ids of the elements in the accordion. Useful for composition.
`onPageChange`		`(details: PageChangeDetails) => void` Called when the page number is changed
`onPageSizeChange`		`(details: PageSizeChangeDetails) => void` Called when the page size is changed
`page`		`number` The controlled active page
`pageSize`		`number` The controlled number of data items per page
`siblingCount`	`1`	`number` Number of pages to show beside active page
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"button"`	`"button" \| "link"` The type of the trigger element
`asChild`		`Snippet` Render a different element.

Ellipsis

Prop	Default	Description
`index`		`number` The index of the ellipsis.
`asChild`		`Snippet` Render a different element.

Item

Prop	Default	Description
`index`		`number` The index of the item.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-index`	The index of the item
`data-part`	item
`data-scope`	pagination
`data-selected`	Present when selected

NextTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	next-trigger
`data-scope`	pagination

PrevTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	prev-trigger
`data-scope`	pagination