Pagination Status - Everyday Interface Patterns

Pagination controls update the current page label, button disabled states, and a polite page status.

Program

Pagination should keep the visible current page, disabled controls, and status text synchronized.

pagination_status.html

Visuals: captured from real browser rendering

<nav aria-label="Pagination">
  <button id="prev" disabled>Previous</button>
  <span id="page-label" aria-current="page">Page 1</span>
  <button id="next">Next</button>
</nav>
<p id="page-status" role="status">Page 1 of 3</p>
<style>
  [aria-current="page"] { font-weight: 700; }
  button:disabled { opacity: .55; }
</style>
<script>
  let pageNumber = 1;
  const totalPages = 3;
  const prev = document.querySelector("#prev");
  const next = document.querySelector("#next");
  const pageLabel = document.querySelector("#page-label");
  const pageStatus = document.querySelector("#page-status");
  prev.addEventListener("click", () => {
    pageNumber = Math.max(1, pageNumber - 1);
    renderPage();
  });
  next.addEventListener("click", () => {
    pageNumber = Math.min(totalPages, pageNumber + 1);
    renderPage();
  });
  function renderPage() {
    pageLabel.textContent = `Page ${pageNumber}`;
    pageStatus.textContent = `Page ${pageNumber} of ${totalPages}`;
    prev.disabled = pageNumber === 1;
    next.disabled = pageNumber === totalPages;
  }
</script>

Name the pagination region.
The navigation region says what kind of navigation it is.
Disable Previous on page one.
The first page cannot go backward.
Mark the current page label.
The current page indicator is exposed in markup.
Style the current page.
The current page is visually distinct.
Listen for Next clicks.
Clicking Next starts the pagination update.
Keep the page within range.
The update cannot move past the final page.
Render the new page status.
The page label, status, and disabled states now match.

pagination label The pagination region needs a name so users know what the controls change.

aria-current aria-current marks the current page indicator.

disabled buttons Disabled previous or next buttons prevent navigation past the available range.