# Pagination
Navigate between multiple pages of content.

```svelte
// Error loading file, please report this issue.
```

## Page Size

```svelte
// Error loading file, please report this issue.
```

## Direction

```svelte
// Error loading file, please report this issue.
```

## Total Count

For server-side pagination, your data source may be truncated. Make sure to specify the total records using `count`.

```json
{
	"data": [...],
	"pagination": {
		"page": 1,
		"limit": 10,
		"count": 500,
	}
}
```


```svelte
<Pagination
	page={response.pagination.page}
	count={response.pagination.count}
	pageSize={response.pagination.limit}
>
	...
</Pagination>
```

## API Reference

### PaginationRoot

| Property | Type | Description |
| --- | --- | --- |
| `ids` | Partial<{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }>, undefined | The ids of the elements in the accordion. Useful for composition. |
| `translations` | IntlTranslations, undefined | Specifies the localized strings that identifies the accessibility elements and their states |
| `count` | number, undefined | Total number of data items |
| `pageSize` | number, undefined | The controlled number of data items per page |
| `defaultPageSize` | number, undefined | The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination. Default: 10 |
| `siblingCount` | number, undefined | Number of pages to show beside active page Default: 1 |
| `page` | number, undefined | The controlled active page |
| `defaultPage` | number, undefined | The initial active page when rendered. Use when you don't need to control the active page of the pagination. Default: 1 |
| `onPageChange` | ((details: PageChangeDetails) => void), undefined | Called when the page number is changed |
| `onPageSizeChange` | ((details: PageSizeChangeDetails) => void), undefined | Called when the page size is changed |
| `type` | "button", "link", undefined | The type of the trigger element Default: "button" |
| `getPageUrl` | ((details: PageUrlDetails) => string), undefined | Function to generate href attributes for pagination links. Only used when `type` is set to "link". |
| `dir` | "ltr", "rtl", undefined | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | (() => ShadowRoot, Node, Document), undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### PaginationRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | () => PaginationApi<PropTypes> |  |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### PaginationRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | Snippet<[() => PaginationApi<PropTypes>]> |  |

### PaginationPrevTrigger

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"button">]>, undefined | Render the element yourself |

### PaginationItem

| Property | Type | Description |
| --- | --- | --- |
| `type`* | "page" |  |
| `value`* | number |  |
| `element` | Snippet<[HTMLAttributes<"a">]>, undefined | Render the element yourself |

### PaginationEllipsis

| Property | Type | Description |
| --- | --- | --- |
| `index`* | number |  |
| `element` | Snippet<[HTMLAttributes<"span">]>, undefined | Render the element yourself |

### PaginationNextTrigger

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"button">]>, undefined | Render the element yourself |