---
description: Add a pagination to handle pages.
links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Pagination.vue
---

## Usage

Use a `v-model` to get a reactive page alongside a `total` which represents the total of items. You can also use the `page-count` prop to define the number of items per page which defaults to `10`.

::component-example
#default
:pagination-example-basic

#code
```vue
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>

<template>
  <UPagination v-model="page" :page-count="5" :total="items.length" />
</template>
```
::

### Max

Use the `max` prop to set a maximum of displayed pages. Defaults to `7`, being the minimum.

::component-card
---
baseProps:
  modelValue: 1
props:
  max: 5
  pageCount: 5
  total: 100
excludedProps:
  - pageCount
  - total
---
::

### Size

Use the `size` prop to change the size of the buttons.

::component-card
---
baseProps:
  modelValue: 1
  total: 100
props:
  size: 'sm'
ui:
  size:
    2xs: true
    xs: true
    sm: true
    md: true
    lg: true
    xl: true
---
::

### Active / Inactive

Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.

::component-card
---
baseProps:
  modelValue: 1
  total: 100
props:
  activeButton:
    variant: 'outline'
  inactiveButton:
    color: 'gray'
excludedProps:
  - activeButton
  - inactiveButton
---
::

### Prev / Next

Use the `prev-button` and `next-button` props to customize the prev and next buttons of the Pagination.

::component-card
---
baseProps:
  modelValue: 1
  total: 100
props:
  prevButton:
    icon: 'i-heroicons-arrow-small-left-20-solid'
    label: Prev
    color: 'gray'
  nextButton:
    icon: 'i-heroicons-arrow-small-right-20-solid'
    trailing: true
    label: Next
    color: 'gray'
excludedProps:
  - prevButton
  - nextButton
---
::

## Slots

### `prev` / `next`

Use the `#prev` and `#next` slots to set the content of the previous and next buttons.

::component-example
#default
:pagination-example-prev-next-slots

#code
```vue
<script setup>
const page = ref(1);
const items = ref(Array(55));
</script>

<template>
  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
    <template #prev="{ onClick }">
      <UTooltip text="Previous page">
        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
      </UTooltip>
    </template>

    <template #next="{ onClick }">
      <UTooltip text="Next page">
        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
      </UTooltip>
    </template>
  </UPagination>
</template>
```
::

## Props

:component-props

## Preset

:component-preset