Pagination

<div class="p234-pagination">
  <p class="p234-pagination__status">Showing 20 of 248 stories</p>
  <button class="p234-btn p234-btn--secondary" type="button">Load 20 more</button>
</div>

<div class="p234-pagination">
  <p class="p234-pagination__status">All 248 stories shown</p>
</div>

<div class="p234-pagination">
  <p class="p234-pagination__status">Showing 40 of 248 stories</p>
  <button class="p234-btn p234-btn--secondary" type="button" disabled aria-busy="true">Loading</button>
</div>

Load more, not page numbers

Readers are on phones, scrolling. A button that extends the list keeps their place; page numbers throw it away. Page numbers also multiply thin URLs for a crawler that is already rationing how much of this site it fetches.

Not infinite scroll

Automatic loading takes the choice away and makes the footer unreachable, which matters here because the footer is doing real internal-linking work. A button is one tap and keeps the end of the page reachable.

Rules

• Say how many of how many. "Showing 20 of 248" is the whole point of the component.
• Say how many more the button will fetch.
• Announce the new items to a screen reader and move focus to the first one.
• Keep the status line when the list ends, so finishing feels like finishing rather than breaking.

• Do not replace the button with a spinner. Disable it and change its label.
• Do not lose the loaded items when the reader goes into an article and comes back.