Pagination

Installation

npx usmds add pagination

Usage

import { Pagination } from '@components/Pagination';
import { useState } from 'react';
 
function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;
  const totalItems = 100;
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      totalItems={totalItems}
      onPageChange={setCurrentPage}
    />
  );
}

Props

Pagination

Extends View props.

Prop	Type	Default	Description
currentPage	`number`	-	The current active page number.
totalPages	`number`	-	The total number of pages.
totalItems	`number`	-	The total number of items across all pages.
onPageChange	`(page: number) => void`	-	Callback fired when the page changes.
className	`string`	-	Additional Tailwind classes to apply.

Examples

Basic Usage

<Pagination
  currentPage={1}
  totalPages={10}
  totalItems={100}
  onPageChange={(page) => console.log(`Page changed to ${page}`)}
/>

With State Management

function PaginationExample() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;
  const totalItems = 100;
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      totalItems={totalItems}
      onPageChange={setCurrentPage}
    />
  );
}

Styling

The Pagination component uses Tailwind CSS classes for styling. Default styling includes:

Container width: 393px
Button dimensions: 50px × 50px
Rounded corners
Primary color for active buttons
Gray color for disabled state
Consistent padding and spacing
Center-aligned text

States

The pagination buttons have several states:

Active: Primary background color
Disabled: Gray background color (when at first/last page)
Default: Primary background color

Accessibility

The Pagination component:

Uses accessibilityRole="button" for navigation buttons
Provides accessibilityLabel for screen readers
Includes proper accessibilityState for disabled buttons
Maintains WCAG color contrast requirements
Supports keyboard navigation
Uses adequate touch target sizes (50x50px)

Pagination

On this page