# Pagination

> Pagination component for indicating a series of related content exists across multiple pages.

Source: https://bootstrap-svelte.vercel.app/components/pagination — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

A simple pagination component consists of pagination items with links, with special styling for the active state and disabled state.

```html
<Pagination.Root>
    <Pagination.Item isDisabled={true}>
        <Pagination.Link href="#!" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </Pagination.Link>
    </Pagination.Item>
</Pagination.Root>
```

## Sizing

You can use the `size` prop to change the size of the pagination component. Available options are `"sm"` for small, `"lg"` for large, or undefined for the default size.

```html
<!-- Small pagination -->
<Pagination.Root size="sm">
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

<!-- Default pagination -->
<Pagination.Root>
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

<!-- Large pagination -->
<Pagination.Root size="lg">
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>
```

## Alignment

You can use the `alignment` prop to change the alignment of the pagination component. Available options are `"center"`, `"end"`, or undefined for the default left alignment.

```html
<!-- Default (start) alignment -->
<Pagination.Root>
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

<!-- Center alignment -->
<Pagination.Root alignment="center">
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>

<!-- End alignment -->
<Pagination.Root alignment="end">
    <Pagination.Item>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>
```

## Disabled State

You can disable the entire pagination component by setting the `disabled` prop to `true`. You can also disable individual pagination items by using the `isDisabled` prop on the Pagination.Item.

```html
<Pagination.Root>
    <Pagination.Item isDisabled={true}>
        <Pagination.Link href="#!">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item isActive={true}>
        <Pagination.Link href="#!">2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
        <Pagination.Link href="#!">3</Pagination.Link>
    </Pagination.Item>
</Pagination.Root>
```

## API Reference

### Pagination.Root Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `alignment` | `'start' \| 'center' \| 'end'` | `undefined` (start) | Horizontal alignment of the pagination component. |
| `ariaLabel` | `string` | `'pagination'` | ARIA label for the pagination navigation. |
| `class` | `string` | `undefined` | Additional CSS classes to apply to the component. |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element. |
| `id` | `string` | `pagination-{uid}` | Unique ID for the pagination element. |
| `size` | `'sm' \| 'lg'` | `undefined` | Size of the pagination component. |

### Pagination.Item Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply to the component. |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element. |
| `id` | `string` | `page-item-{uid}` | Unique ID for the pagination item element. |
| `isActive` | `boolean` | `false` | Whether the pagination item is active. |
| `isDisabled` | `boolean` | `false` | Whether the pagination item is disabled. |

### Pagination.Link Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabel` | `string` | `undefined` | ARIA label for the link. |
| `class` | `string` | `undefined` | Additional CSS classes to apply to the component. |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element. |
| `href` | `string` | `'#!'` | URL for the link. |
| `id` | `string` | `page-link-{uid}` | Unique ID for the pagination link element. |

### CSS Classes

The component applies Bootstrap's pagination classes based on the provided props:

- `pagination` - Base class for the Pagination component
- `page-item` - Applied to Pagination.Item components
- `page-link` - Applied to Pagination.Link components
- `pagination-sm` - Applied when size="sm"
- `pagination-lg` - Applied when size="lg"
- `justify-content-center` - Applied when alignment="center"
- `justify-content-end` - Applied when alignment="end"
- `active` - Applied to Pagination.Item when isActive=true
- `disabled` - Applied to Pagination.Item when isDisabled=true or parent Pagination.Root has isDisabled=true