# Pagination
The **Pagination** component is responsive and flexible way to indicate a series of related content exists across multiple pages. It can be used to displays data in paged format and provides navigation between pages. The root element is a [HTML native nav element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) to indicate a navigation section. The component uses the [Button](/components/Button) component for the navigation elements.
## Examples
## Pagination Component > A responsive and flexible paginator navigation. ```html ``` ### Props | Prop name | Description | Type | Values | Default | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ariaCurrentLabel | Accessibility label for the current page button. | string | - |
From config:
pagination: {
  ariaCurrentLabel: "Current page"
} | | ariaNextLabel | Accessibility label for the next page button. | string | - |
From config:
pagination: {
  ariaNextLabel: "Next page"
} | | ariaPageLabel | Accessibility label for the page button. | string | - |
From config:
pagination: {
  ariaPageLabel: "Page"
} | | ariaPreviousLabel | Accessibility label for the previous page button. | string | - |
From config:
pagination: {
  ariaPreviousLabel: "Previous page"
} | | buttonTag | Pagination button tag name | DynamicComponent | - |
From config:
pagination: {
  buttonTag: PlainButton
} | | current |
deprecated - will be renamed to `modelValue`
Current page number, use v-model:current to make it two-way binding
| number | - | 1 | | disabled | Buttons will be disabled | boolean | - | false | | 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` |
From config:
pagination: {
  iconPack: undefined
} | | iconPrev | Icon to use for previous button | string | - |
From config:
pagination: {
  iconPrev: "chevron-left"
} | | mobileBreakpoint | Mobile breakpoint as `max-width` value | string | - |
From config:
pagination: {
  mobileBreakpoint: undefined
} | | override | Override existing theme classes completely | boolean | - | | | perPage | Items count for each page | number \| string | - |
From config:
pagination: {
  perPage: 20
} | | position | Buttons position order | "centered" \| "left" \| "right" | `centered`, `right`, `left` |
From config:
pagination: {
  position: "right"
} | | rangeAfter | Number of pagination items to show after current page | number | - | 1 | | rangeBefore | Number of pagination items to show before current page | number | - | 1 | | rounded | Enable rounded button style | boolean | - |
From config:
pagination: {
  rounded: false
} | | simple | Enable simple style | boolean | - |
From config:
pagination: {
  simple: false
} | | size | Pagination size | string | `small`, `medium`, `large` |
From config:
pagination: {
  size: undefined
} | | total | Total count of items | number | - | | ### Events | Event name | Properties | Description | | -------------- | --------------------------------------------------------------------------------- | ---------------------------- | | update:current | **value** `number` - updated current prop | current prop two-way binding | | change | **value** `number` - current value | on current change event | | next | **event** `Event` - native click event
**value** `number` - new current value | on next button event click | | previous | **event** `Event` - native click event
**value** `number` - new current value | on previous button event | ### Slots | Name | Description | Bindings | | -------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | previous | Define a custom previous button here | **number** `number` - page number
**isCurrent** `boolean` - if page is current
**onClick** `(event: Event): void` - click handler
**ariaLabel** `string` - aria-label attribute | | next | Define a custom next button here | **number** `number` - page number
**isCurrent** `boolean` - if page is current
**onClick** `(event: Event): void` - click handler
**ariaLabel** `string` - aria-label attribute | | default | Define a custom pagination button here | **number** `number` - page number
**isCurrent** `boolean` - if page is current
**onClick** `(event: Event): void` - click handler
**ariaLabel** `string` - aria-label attribute |
## Class Inspector
## Sass Variables
> Current theme ➜ _[Oruga](https://github.com/oruga-ui/theme-oruga)_ | SASS Variable | Default | | ------------------------------------------- | --------------------------------------- | | $pagination-spacer | calc(0.5 \* h.useVar("control-spacer")) | | $pagination-disabled-opacity | h.useVar("control-disabled-opacity") | | $pagination-ellipsis-color | h.useVar("grey-light") | | $pagination-button-color | h.useVar("font-color") | | $pagination-button-font-size | h.useVar("font-size") | | $pagination-button-font-weight | h.useVar("font-weight") | | $pagination-button-line-height | h.useVar("line-height") | | $pagination-button-height | 2.25em | | $pagination-button-min-width | $pagination-button-height | | $pagination-button-padding | h.useVar("control-spacer") | | $pagination-button-box-shadow | none | | $pagination-button-border-width | h.useVar("control-border-width") | | $pagination-button-border-color | h.useVar("control-border-color") | | $pagination-button-border-style | solid | | $pagination-button-border-radius | h.useVar("border-radius") | | $pagination-button-border-radius-rounded | h.useVar( "border-radius-rounded") | | $pagination-button-background-color | h.useVar( "control-background-color") | | $pagination-button-hover-color | $pagination-button-color | | $pagination-button-hover-background-color | $pagination-button-background-color | | $pagination-button-hover-border-color | $pagination-button-border-color | | $pagination-button-current-color | h.useVar("white") | | $pagination-button-current-background-color | h.useVar("primary") | | $pagination-button-current-border-color | h.useVar("primary") | See ➜ 📄 [SCSS file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_pagination.scss)
> Current theme ➜ _[Bulma](https://github.com/oruga-ui/theme-bulma)_

The theme does not have any custom variables for this component.

> Current theme ➜ _[Bootstrap](https://github.com/oruga-ui/theme-bootstrap)_ | SASS Variable | Default | | ------------------------ | ------- | | $pagination-items-spacer | 0.5rem | See ➜ 📄 [SCSS file](https://github.com/oruga-ui/theme-bootstrap/tree/main/src/assets/scss/components/_pagination.scss)