Pagination

Name: a13y
Rating: 5.0 (1 reviews)
Author: Diego Aneli

An accessible pagination component for navigating through pages of content. Uses proper ARIA attributes and keyboard navigation.

Basic Usage

Simple pagination with navigation controls.

Current page: 1 of 10

import { useState } from 'react';
import { AccessiblePagination } from '@a13y/react';

function Example() {
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <AccessiblePagination
      currentPage={currentPage}
      totalPages={10}
      onPageChange={setCurrentPage}
    />
  );
}

Many Pages

Pagination automatically shows ellipsis for large page counts.

Current page: 5 of 50

Props

Name	Type	Default	Description
`currentPage*`	`number`	-	Current active page (1-indexed)
`totalPages*`	`number`	-	Total number of pages
`onPageChange*`	`(page: number) => void`	-	Callback fired when page changes
`siblingCount`	`number`	`1`	Number of page buttons to show on each side of current page
`showFirstLast`	`boolean`	`true`	Show first and last page buttons
`className`	`string`	-	Optional CSS class for the pagination container

Accessibility Features

✓Uses nav element with aria-label="Pagination"
✓Current page marked with aria-current="page"
✓Descriptive aria-labels for Previous/Next buttons
✓Keyboard accessible navigation
✓Disabled state for buttons when at first/last page