import Pagination from "@ui/Pagination.vue"

Pagination

The pagination component helps users navigate through large lists of results by splitting them up into pages.

Prop	Data type	Required?	Description
`pages`	Number	Yes	The total number of pages to paginate.
`v-model:page`	Number	Yes	The page number of the current page.

NOTE

Use this component for navigation targets only. The semantics of the <nav> element apply.

Pagination model

Create a pagination bar by passing the number of pages to the pages prop. Use v-model to sync the selected page to your page data. Users can click on each button or input a specific page and hit return.

template

<Pagination :pages="8" v-model:page="page" />

Using this component

It's clear and obvious which section of the page the pagination control belongs to. For example, the Pagination is directly below a paginated list of search results. 1.3.1
Page changes do not trigger unexpected context changes (like auto-scrolling to the top). 3.2.2
Users can locate content through multiple ways (e.g., pagination alongside search or filtering). 2.4.5
Users can determine their current location within the paginated content. 2.4.8
If the page content changes, a status message announces the update (e.g., "Showing results 11-20 of 45"). 4.1.3

Accessible Pagination

template

<Pagination
  v-model:page="page"
  :pages
/>

Test this component in isolation against WCAG2 criteria

Button

Forms

Pill

Layout

Navigation

Pill

Pagination ​

Pagination model ​

A11y Checklist ​

Accessible Pagination ​

Pagination

Pagination model

A11y Checklist

Accessible Pagination