---

title: PageSelector

---

# PageSelector

Component that renders a pagination control with buttons for navigating
between pages. It displays the current page, allows selecting other pages,
and emits events when a page is selected.

## Props

| Name                       | Description                                                                 | Type                                                                                                     | Default                    |
| -------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------- |
| <code>buttonClasses</code> | CSS classes to customize the prev/next buttons.                             | <code>(string \| Dictionary<boolean>)[]</code>                                                           | <code>() => []</code>      |
| <code>currentPage</code>   | The current page number.                                                    | <code>number</code>                                                                                      | <code></code>              |
| <code>hiddenPage</code>    | The string content of the hidden pages.                                     | <code>string</code>                                                                                      | <code>'...'</code>         |
| <code>itemClasses</code>   | CSS classes to customize the page items.                                    | <code>(isSelected: boolean) => string \| Dictionary<boolean> \| (string \| Dictionary<boolean>)[]</code> | <code>() => []</code>      |
| <code>range</code>         | The number of pages to show before and after the current page.              | <code>number</code>                                                                                      | <code>2</code>             |
| <code>scrollTarget</code>  | The class of the scroll container to scroll to top when a page is selected. | <code>string</code>                                                                                      | <code>'main-scroll'</code> |
| <code>totalPages</code>    | The total number of pages.                                                  | <code>number</code>                                                                                      | <code></code>              |

## Slots

| Name                              | Description | Bindings<br />(name - type - description) |
| --------------------------------- | ----------- | ----------------------------------------- |
| <code>previous-page-button</code> |             | None                                      |
| <code>page-button</code>          |             | <br />                                    |
| <code>next-page-button</code>     |             | None                                      |

## Events

This component emits the "UserSelectedAPage" and the UserClickedScrollToTop events by default.

## See it in action

Basic example of how the component is rendered.

```vue live
<template>
  <PageSelector :current-page="page" :total-pages="totalPages" />
</template>

<script>
import { PageSelector } from "@empathyco/x-components";

export default {
  name: "PageSelectorDemo",
  components: {
    PageSelector,
  },
  data() {
    return {
      page: 0,
      totalPages: 10,
    };
  },
};
</script>
```

### Customize the slots

This component allows to customise its content using slots.

```vue live
<template>
  <PageSelector
    :total-pages="totalPages"
    :currentPage="page"
    :item-classes="
      (isSelected: boolean) =>
        isSelected
          ? 'x-button-lead x-text-neutral-10'
          : 'x-text-neutral-90 x-button-outlined'
    "
    :buttonClasses="['x-rounded-md']"
  >
    <template #previous-page-button>
      <span>Back</span>
    </template>
    <template #page-button="{ page, isSelected }">
      <h2 :class="{ 'x-text1': !isSelected }">
        {{ page }}
      </h2>
    </template>
    <template #next-page-button>
      <span>Forward</span>
    </template>
  </PageSelector>
</template>

<script>
import { PageSelector } from "@empathyco/x-components";

export default {
  name: "PageSelectorDemo",
  components: {
    PageSelector,
  },
  data() {
    return {
      page: 2,
      totalPages: 10,
    };
  },
};
</script>
```

### Customize the number of pages to show before and after the current page by changing the range default value.

```vue live
<template>
  <PageSelector :current-page="page" :total-pages="totalPages" :range="range" />
</template>

<script>
import { PageSelector } from "@empathyco/x-components";

export default {
  name: "PageSelectorDemo",
  components: {
    PageSelector,
  },
  data() {
    return {
      page: 6,
      totalPages: 100,
      range: 4,
    };
  },
};
</script>
```