Skip to main content
Our new developer certification is live!

Pagination

Pagination component for navigating through paginated search results.

Props

PropTypeRequiredDefaultDescription
currentPagenumberYes-Current active page number (1-indexed)
totalPagesnumberYes-Total number of pages

Usage

import Pagination from '@/components/molecules/Pagination';

<Pagination currentPage={2} totalPages={5} />

Features

  • Previous/Next buttons: Navigate to adjacent pages
  • Page numbers: Shows first, last, current, and adjacent pages
  • Ellipsis: Shows "..." for skipped page ranges
  • URL management: Updates search URL parameters, removes page=1
  • Disabled states: Previous disabled on page 1, Next disabled on last page
  • Accessibility: Proper ARIA labels and current page indication

Page Number Display Logic

Shows page numbers when:

  • Page 1 (always shown)
  • Last page (always shown)
  • Current page (always shown)
  • Pages within 1 of current page (currentPage - 1, currentPage + 1)

Shows ellipsis when:

  • Page is 2 away from current (currentPage - 2 or currentPage + 2)

URL Behavior

  • Page 1: Removes page parameter from URL (cleaner URLs)
  • Other pages: Sets page parameter (e.g., ?page=2)
  • Preserves other search parameters (types, subjects)

Styling

  • Current page: Uses PrimaryFillButton variant (highlighted)
  • Other pages: Uses SecondaryFillButton variant
  • Previous/Next: Uses arrow icons rotated appropriately
  • Centered layout with gap spacing

Notes

  • Returns null if totalPages <= 1 (no pagination needed)
  • Uses Next.js router for client-side navigation
  • Scrolls to top when page changes (scroll: false prevents scroll)
  • Hardcoded to /search route (specific to search functionality)