# Pagination

A responsive and flexible pagination


edit on github

# Examples

# Base

# Slots

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
ellipsisClass Class of the pagination ellipsis .
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
infoClass Class of the info in `simple` mode. simple
linkClass Class of the link button.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
linkCurrentClass Class of the current link.
linkDisabledClass Class of the disabled link.
listClass Class of the pagination list.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
mobileClass Class of pagination component when on mobile.
👉 Switch to mobile view to see it in action!
nextBtnClass Class of the next button.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
orderClass Class of the pagination order. order centered
right
left
prevBtnClass Class of the prev. button.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
rootClass Class of the root element.
roundedClass Class of the pagination when rounded. rounded
simpleClass Class of the pagination in `simple` mode. simple
sizeClass Class for the pagination size. size small
medium
large


# Props

Prop name Description Type Values Default
ariaCurrentLabel string -
ariaNextLabel string -
ariaPageLabel string -
ariaPreviousLabel string -
current Current page number, use the .sync modifier (Vue 2.x) or v-model:current (Vue 3.x) to make it two-way binding number|string - 1
iconNext Icon to use for next button string -
From config

pagination: {
  iconNext: 'chevron-right'
}
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconPrev Icon to use for previous button string -
From config

pagination: {
  iconPrev: 'chevron-left'
}
mobileBreakpoint Mobile breakpoint as max-width value string -
order Buttons order, optional string centered, right, left
override Override classes boolean - false
perPage Items count for each page number|string -
From config

pagination: {
  perPage: 20
}
rangeAfter Number of pagination items to show after current page number|string - 1
rangeBefore Number of pagination items to show before current page number|string - 1
rounded Rounded button styles boolean -
simple Simple style boolean -
size Pagination size, optional string small, medium, large
total Total count of items number|string -

# Events

Event name Properties Description
change
update:current

# Slots

Name Description Bindings
previous

next

default

# Style

CSS Variable SASS Variable Default
--oruga-pagination-disabled-opacity $pagination-disabled-opacity $base-disabled-opacity
--oruga-pagination-ellipsis-color $pagination-ellipsis-color $grey-light
--oruga-pagination-link-border-color $pagination-link-border-color $grey-lighter
--oruga-pagination-link-border-radius $pagination-link-border-radius $base-border-radius
--oruga-pagination-link-border $pagination-link-border 1px solid transparent
--oruga-pagination-link-color $pagination-link-color #363636
--oruga-pagination-link-current-background-color $pagination-link-current-background-color $primary
--oruga-pagination-link-current-border-color $pagination-link-current-border-color $primary // !!!
--oruga-pagination-link-current-color $pagination-link-current-color #fff
--oruga-pagination-link-height $pagination-link-height 2.25em
--oruga-pagination-link-hover-border-color $pagination-link-hover-border-color $grey-light
--oruga-pagination-link-line-height $pagination-link-line-height $base-line-height
--oruga-pagination-link-margin $pagination-link-margin .25rem
--oruga-pagination-link-min-width $pagination-link-min-width 2.25em
--oruga-pagination-link-padding $pagination-link-padding .5em .5em
--oruga-pagination-margin $pagination-margin -.25rem
--oruga-pagination-rounded-border-radius $pagination-rounded-border-radius $base-rounded-border-radius