navigation

Pagination

Add a pagination to handle pages.

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.

<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.

<UPagination :max="5" :page-count="5" :total="100" :value="1" />

Size

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

<UPagination size="sm" :value="1" :total="100" />

Active / Inactive

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

<UPagination  :active-button="{ variant: 'outline' }"  :inactive-button="{ color: 'gray' }"  :value="1"  :total="100"/>

Prev / Next

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

<UPagination  :prev-button="{ icon: 'i-heroicons-arrow-small-left-20-solid', label: 'Prev', color: 'gray' }"  :next-button="{ icon: 'i-heroicons-arrow-small-right-20-solid', trailing: true, label: 'Next', color: 'gray' }"  :value="1"  :total="100"/>

Slots

prev / next

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

<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

modelValuerequired
number
totalrequired
number
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl"
config.default.size
ui
any
undefined
max
number
7
divider
string
"\u2026"
pageCount
number
10
activeButton
Button
config.default.activeButton as Button
inactiveButton
Button
config.default.inactiveButton as Button
firstButton
Button
config.default.firstButton as Button
lastButton
Button
config.default.lastButton as Button
prevButton
Button
config.default.prevButton as Button
nextButton
Button
config.default.nextButton as Button
showFirst
boolean
false
showLast
boolean
false

Preset

UPagination.vue
{  "wrapper": "flex items-center -space-x-px",  "base": "",  "rounded": "first:rounded-s-md last:rounded-e-md",  "default": {    "size": "sm",    "activeButton": {      "color": "primary"    },    "inactiveButton": {      "color": "white"    },    "firstButton": {      "color": "white",      "class": "rtl:[&_span:first-child]:rotate-180",      "icon": "i-heroicons-chevron-double-left-20-solid"    },    "lastButton": {      "color": "white",      "class": "rtl:[&_span:last-child]:rotate-180",      "icon": "i-heroicons-chevron-double-right-20-solid"    },    "prevButton": {      "color": "white",      "class": "rtl:[&_span:first-child]:rotate-180",      "icon": "i-heroicons-chevron-left-20-solid"    },    "nextButton": {      "color": "white",      "class": "rtl:[&_span:last-child]:rotate-180",      "icon": "i-heroicons-chevron-right-20-solid "    }  }}