Pagination

Numbered page buttons with the current page highlighted. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue
import { UiPagination } from '@ziyarago/ui/vue'

Few pages

Vue
<UiPagination :pages="5" :page="2" />

Many pages

Vue
<UiPagination :pages="9" :page="6" />

Hundreds of pages (ellipsis)

Vue
<UiPagination :pages="240" :page="57" />

Siblings 2

Vue
<UiPagination :pages="240" :page="120" :siblings="2" />

Sizes

Vue
<UiPagination :pages="5" :page="2" size="xs" />

<UiPagination :pages="5" :page="2" size="sm" />

<UiPagination :pages="5" :page="2" size="md" />

<UiPagination :pages="5" :page="2" size="lg" />

<UiPagination :pages="5" :page="2" size="xl" />

API reference

Page navigation with numbered buttons, ellipsis windowing and previous/next; use under tables and lists.

Props

PropType and valuesDefaultDescription
pagenumber—Current page, 1-based. Changed via the change event.
pagesnumber1Total number of pages.
siblingsnumber1Page buttons shown on each side of the current page. First and last page are always shown; gaps become an ellipsis.
labelstring'Pagination'Accessible name of the navigation landmark.
hideArrowsbooleanfalseHides the previous and next buttons.
labels{ prev?: string; next?: string; page?: string }'{ prev: 'Previous page', next: 'Next page', page: 'Page' }'Accessible names of the arrow buttons and of each page button ("Page 3").
sizexssmmdlgxl'md'Scale of button size and text.

Events

Vue: @name. React: onName.

changeCalled with the clicked page number (also from the previous and next buttons).

Notes

  • Shows first, last and current plus or minus siblings with an ellipsis for gaps, so it scales to hundreds of pages. A gap of a single page shows that page instead of an ellipsis.
  • Previous and next buttons carry aria-label "Previous page" and "Next page" and are disabled at the ends; the current page has aria-current="page".