VPagination API

Props

name	type	default
`active-color`	string	undefined
The applied color when the component is in an active state.
`aria-label`	string	'$vuetify.pagination.ariaLabel.root'
Label for the root element.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the selected page button - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`current-page-aria-label`	string	'$vuetify.pagination.ariaLabel.currentPage'
Label for the currently selected page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`ellipsis`	string	'...'
Text to show between page buttons when truncating the list.
`first-aria-label`	string	'$vuetify.pagination.ariaLabel.first'
Label for the go to first button.
`first-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$first'
The icon to use for the first button.
`last-aria-label`	string	'$vuetify.pagination.ariaLabel.last'
Label for the go to last button.
`last-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$last'
The icon to use for the last button.
`length`	string \| number	1
The number of pages.
`model-value`	number	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`next-aria-label`	string	'$vuetify.pagination.ariaLabel.next'
Label for the next button.
`next-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$next'
The icon to use for the next button.
`page-aria-label`	string	'$vuetify.pagination.ariaLabel.page'
Label for each page button.
`prev-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$prev'
The icon to use for the prev button.
`previous-aria-label`	string	'$vuetify.pagination.ariaLabel.previous'
Label for the previous button.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`show-first-last-page`	boolean	false
Show buttons for going to first and last page.
`size`	string \| number	'default'
Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large.
`start`	string \| number	1
Specify the starting page.
`tag`	string \| (new () => any) \| FunctionalComponent	'nav'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`total-visible`	string \| number	undefined
Specify the total visible pagination numbers.
`variant`	'flat' \| 'text' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'text'
Applies a distinct style to the component.

Events

name	type
`first`	[number]
Emitted when clicking on go to first button.
`last`	[number]
Emitted when clicking on go to last button.
`next`	[number]
Emitted when clicking on go to next button.
`prev`	[number]
Emitted when clicking on go to previous button.
`update:modelValue`	[number]
Event that is emitted when the component’s model changes.

Slots

{
  icon:
    | string
    | (new () => any)
    | FunctionalComponent
    | (string | [string, number])[]
  onClick: (e: Event) => void
  disabled: boolean
  'aria-label': string
  'aria-disabled': boolean
}

{
  isActive: boolean
  key: string | number
  page: string
  props: Record<string, any>
}

{
  icon:
    | string
    | (new () => any)
    | FunctionalComponent
    | (string | [string, number])[]
  onClick: (e: Event) => void
  disabled: boolean
  'aria-label': string
  'aria-disabled': boolean
}

{
  icon:
    | string
    | (new () => any)
    | FunctionalComponent
    | (string | [string, number])[]
  onClick: (e: Event) => void
  disabled: boolean
  'aria-label': string
  'aria-disabled': boolean
}

{
  icon:
    | string
    | (new () => any)
    | FunctionalComponent
    | (string | [string, number])[]
  onClick: (e: Event) => void
  disabled: boolean
  'aria-label': string
  'aria-disabled': boolean
}

`first`
Define a custom appearance for the first button.
`item`
Define a custom item appearance.
`last`
Define a custom appearance for the last button.
`next`
Define a custom appearance for the next button.
`prev`
Define a custom appearance for the previous button.

SASS Variables

name	default
`$pagination-item-margin`	.3rem

#VPagination API

VPagination API