Pagination

Pagination is the row of page numbers under a long list. It is deliberately all parts and no state: it renders what you tell it and reports presses, because which pages exist, which is current and how the ellipsis falls are decisions that belong to the data, not to the control.

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationSummary,
} from "ropav";

PaginationContent is the list, PaginationItem one entry in it, and PaginationLink the pressable number. PaginationPrevious and PaginationNext are the ends, PaginationEllipsis stands for the pages that are not shown, and PaginationSummary is the "showing 21–40 of 312" line.

Showing 21–40 of 312

• …

pagination-basic.vue

<script setup lang="ts">
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationNextIcon,
  PaginationPrevious,
  PaginationPreviousIcon,
  PaginationSummary,
} from "ropav";
</script>

<template>
  <Pagination aria-label="Search results">
    <PaginationSummary>Showing 21–40 of 312</PaginationSummary>

    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious>
          <PaginationPreviousIcon />
          <span>Previous</span>
        </PaginationPrevious>
      </PaginationItem>

      <PaginationItem><PaginationLink>1</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink is-active>2</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink>3</PaginationLink></PaginationItem>
      <PaginationItem><PaginationEllipsis /></PaginationItem>
      <PaginationItem><PaginationLink>16</PaginationLink></PaginationItem>

      <PaginationItem>
        <PaginationNext>
          <span>Next</span>
          <PaginationNextIcon />
        </PaginationNext>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

is-active on a link marks the page being viewed; is-disabled on the ends stops the reader walking off either edge.

Accessibility

• The whole thing is a navigation landmark. aria-label defaults to "pagination" and is worth overriding whenever there are two sets of controls on one page — above the list and below it — because otherwise the same landmark is reported twice with the same name.
• is-active renders aria-current="page", so a reader is told where they are rather than only seeing it in the highlight.
• The ellipsis is aria-hidden — it says nothing, because "…" read aloud between two page numbers is noise. PaginationSummary is what carries the shape of the list instead.
• Previous and next should say so in text. An arrow alone is announced as an unlabelled button, which is why the parts here take a <span> beside the icon rather than only the icon.

API

Pagination

Prop	Type	Default	Description
ariaLabel	string	"pagination"	Name for the navigation landmark. Overridable because the name is what tells two paginations apart: a list with one set of controls above it and another below reports the same landmark twice otherwise.
size	"xs" | "sm" | "md" | "lg"	"md"	Pagination size.

Slots: default.

PaginationContent

Slots: default.

PaginationEllipsis

PaginationEllipsis takes nothing but class.

PaginationItem

Slots: default.

PaginationLink

Prop	Type	Default	Description
isActive	boolean	—	Marks the page this link points at as the one being viewed.
isDisabled	boolean	—	Disables the control.
type	"button" | "reset" | "submit"	"button"	Native button type.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isFocusVisible	boolean
isHovered	boolean
isPressed	boolean

Event	Payload
click	MouseEvent

PaginationNext

Prop	Type	Default	Description
isDisabled	boolean	—	Disables the control.
type	"button" | "reset" | "submit"	"button"	Native button type.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isFocusVisible	boolean
isHovered	boolean
isPressed	boolean

Event	Payload
click	MouseEvent

PaginationNextIcon

Slots: default.

PaginationPrevious

Prop	Type	Default	Description
isDisabled	boolean	—	Disables the control.
type	"button" | "reset" | "submit"	"button"	Native button type.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isFocusVisible	boolean
isHovered	boolean
isPressed	boolean

Event	Payload
click	MouseEvent

PaginationPreviousIcon

Slots: default.

PaginationSummary

Slots: default.