# Pagination



> The Pagination component enables the user to select a specific page from a range of pages with previous/next controls, collapsing long ranges with ellipses.

## Examples

### Default

```tsx
import { useState } from "react";
import { Pagination } from "@kesko/components";

export default () => {
  const [page, setPage] = useState(1);

  return <Pagination count={10} page={page} onChange={setPage} />;
};

```

```html
<nav class="k-pagination" aria-label="Pagination">
  <div class="k-pagination-content">
    <div class="k-pagination-prev">
      <button class="k-button" variant="plain" disabled>
        <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M14.748 17.688a.401.401 0 0 1 0 .565l-.495.495a.401.401 0 0 1-.565 0l-6.465-6.465a.401.401 0 0 1 0-.565l6.465-6.465a.401.401 0 0 1 .565 0l.495.495a.401.401 0 0 1 0 .565L9.06 12z" fill="currentColor" /></svg>
        Previous
      </button>
    </div>

    <div class="k-pagination-pages">
      <button class="k-button" variant="primary" aria-current="page">1</button>
      <button class="k-button" variant="plain">2</button>
      <button class="k-button" variant="plain">3</button>
      <button class="k-button" variant="plain">4</button>
      <button class="k-button" variant="plain">5</button>
      <span class="k-pagination-ellipsis" aria-hidden="true">…</span>
      <button class="k-button" variant="plain">10</button>
    </div>

    <div class="k-pagination-next">
      <button class="k-button" variant="plain">
        Next
        <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M16.777 12.283l-6.465 6.465a.401.401 0 0 1-.564 0l-.495-.495a.401.401 0 0 1 0-.565L14.94 12 9.253 6.312a.401.401 0 0 1 0-.565l.495-.494a.401.401 0 0 1 .565 0l6.464 6.465a.401.401 0 0 1 0 .565z" fill="currentColor" /></svg>
      </button>
    </div>
  </div>
</nav>
```

### Windowed

```tsx
import { useState } from "react";
import { Pagination } from "@kesko/components";

export default () => {
  const [page, setPage] = useState(10);

  return <Pagination count={20} page={page} siblingCount={2} boundaryCount={2} onChange={setPage} />;
};

```

```html
<nav class="k-pagination" aria-label="Pagination">
  <div class="k-pagination-content">
    <div class="k-pagination-prev">
      <button class="k-button" variant="plain">
        <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M14.748 17.688a.401.401 0 0 1 0 .565l-.495.495a.401.401 0 0 1-.565 0l-6.465-6.465a.401.401 0 0 1 0-.565l6.465-6.465a.401.401 0 0 1 .565 0l.495.495a.401.401 0 0 1 0 .565L9.06 12z" fill="currentColor" /></svg>
        Previous
      </button>
    </div>

    <div class="k-pagination-pages">
      <button class="k-button" variant="plain">1</button>
      <button class="k-button" variant="plain">2</button>
      <span class="k-pagination-ellipsis" aria-hidden="true">…</span>
      <button class="k-button" variant="plain">8</button>
      <button class="k-button" variant="plain">9</button>
      <button class="k-button" variant="primary" aria-current="page">10</button>
      <button class="k-button" variant="plain">11</button>
      <button class="k-button" variant="plain">12</button>
      <span class="k-pagination-ellipsis" aria-hidden="true">…</span>
      <button class="k-button" variant="plain">19</button>
      <button class="k-button" variant="plain">20</button>
    </div>

    <div class="k-pagination-next">
      <button class="k-button" variant="plain">
        Next
        <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M16.777 12.283l-6.465 6.465a.401.401 0 0 1-.564 0l-.495-.495a.401.401 0 0 1 0-.565L14.94 12 9.253 6.312a.401.401 0 0 1 0-.565l.495-.494a.401.401 0 0 1 .565 0l6.464 6.465a.401.401 0 0 1 0 .565z" fill="currentColor" /></svg>
      </button>
    </div>
  </div>
</nav>
```


## Props

- `count` — `number` Total number of pages.
- `siblingCount` — `number` (default: `1`) Number of always-visible page buttons on each side of the active page.
- `boundaryCount` — `number` (default: `1`) Number of always-visible page buttons at the start and end of the range.
- `itemLabel` — `(paginationItem: PaginationItem) => string` Returns the accessible label for a numbered page button as well as next and prev buttons.
- `prevLabel` — `string` (default: `"Previous"`) Visible label for the previous-page button.
- `nextLabel` — `string` (default: `"Next"`) Visible label for the next-page button.
- `hidePrev` — `boolean` (default: `false`) Hides the previous-page button.
- `hideNext` — `boolean` (default: `false`) Hides the next-page button.
- `page` — `number` The currently active page (1-based).
- `aria-label` — `string` Accessible label for the navigation landmark.
- `href` — `(paginationItem: PaginationItem) => string` Returns the href for a page item as well as next and prev buttons, rendering the items as links.

## Events

- `onChange` — `(page: number, e: MouseEvent<ButtonTarget>) => void` Called with the newly selected page and the originating click event.

## CSS custom properties

- `--k-pagination-column-gap` (default: `var(--k-space-4xs)`) Overrides the horizontal gap between items.
- `--k-pagination-row-gap` (default: `var(--k-space-2xs)`) Overrides the vertical gap between the page list and the controls.
- `--k-pagination-color-ellipsis` (default: `var(--k-color-text-link)`) Overrides the ellipsis color.