Skip to main content

Pagination

Numbered page navigation with previous and next controls. Web convention — not part of Apple HIG. For Apple-style paged indicators, see Page Control.

Selectors

.pagination
Numbered page navigation with active and disabled states.

Default

HTML 
<nav class="pagination" aria-label="Pagination">
  <button aria-label="Previous page" disabled>
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
  </button>
  <button aria-current="page">1</button>
  <button>2</button>
  <button>3</button>
  <span>...</span>
  <button>10</button>
  <button aria-label="Next page">
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
  </button>
</nav>

Simple (Numbers Only)

HTML 
<nav class="pagination" aria-label="Pagination">
  <button aria-current="page">1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</nav>

Icons Only

HTML 
<nav class="pagination" aria-label="Pagination">
  <button aria-label="Previous page" disabled>
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
  </button>
  <button aria-label="Next page">
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
  </button>
</nav>

With Text Buttons

HTML 
<nav class="pagination" aria-label="Pagination">
  <button class="px-3 gap-1" disabled>
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    Previous
  </button>
  <button aria-current="page">1</button>
  <button>2</button>
  <button>3</button>
  <button class="px-3 gap-1">
    Next
    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
  </button>
</nav>