Pagination

Introduction

The Pagination component provides a navigation system for multi-page content with first, previous, next, and last page controls. It includes proper ARIA labels and keyboard navigation support.

When to use

Blog post listings
Search results
Product catalogs
Image galleries
Data tables
Any content split across multiple pages

Usage

---
import { Pagination } from 'accessible-astro-components'
---

<Pagination
  firstPage="/blog/1"
  previousPage="/blog/4"
  nextPage="/blog/6"
  lastPage="/blog/12"
  currentPage="5"
  totalPages="12"
/>

Props

Prop	Type	Default	Description
`firstPage`	`string \| null \| undefined`	`'#'`	URL for the first page, falsy value disables the control
`previousPage`	`string \| null \| undefined`	`'#'`	URL for the previous page, falsy value disables the control
`nextPage`	`string \| null \| undefined`	`'#'`	URL for the next page, falsy value disables the control
`lastPage`	`string \| null \| undefined`	`'#'`	URL for the last page, falsy value disables the control
`currentPage`	`string \| number`	`'1'`	Current page number
`totalPages`	`string \| number`	`'12'`	Total number of pages
`renderProgress`	`Function`	`undefined`	Custom function to render the progress text

Accessibility features

Semantic <nav> element with proper aria-label
Clear visual indication of disabled controls
Descriptive ARIA labels for navigation buttons
Keyboard navigation support
High contrast icons
Clear focus indicators
Proper button states

.pagination {
  --pagination-gap: 1rem;
  --pagination-border-width: 2px;
  --pagination-radius: 3px;
  --pagination-hover-bg: orange;
  --pagination-disabled-opacity: 0.5;
}

.pagination__list {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pagination a,
.pagination .disabled {
  display: block;
  border-width: 2px;
  border-style: solid;
  border-radius: 3px;
}

.pagination .disabled {
  border-color: grey;
  opacity: 0.5;
}

Interactive example

You can customize the progress text using the renderProgress prop:

<Pagination
  renderProgress={({ currentPage, totalPages }) =>
    `${currentPage} of ${totalPages} pages`
  }
/>