Pagination

Moving through long lists

Default

Code

<nav class="pagination" aria-label="Pagination" data-pager data-pages="12">
  <button type="button" aria-label="Previous page" data-page="prev"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <button type="button" data-page="1" aria-label="Page 1">1</button>
  <button type="button" data-page="2" aria-label="Page 2">2</button>
  <button type="button" data-page="3" aria-label="Page 3" aria-current="page">3</button>
  <button type="button" data-page="4" aria-label="Page 4">4</button>
  <span>…</span>
  <button type="button" data-page="12" aria-label="Page 12">12</button>
  <button type="button" aria-label="Next page" data-page="next"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</nav>

Few pages

Code

<nav class="pagination" aria-label="Pagination" data-pager data-pages="4">
  <button type="button" aria-label="Previous page" data-page="prev" disabled><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <button type="button" data-page="1" aria-label="Page 1" aria-current="page">1</button>
  <button type="button" data-page="2" aria-label="Page 2">2</button>
  <button type="button" data-page="3" aria-label="Page 3">3</button>
  <button type="button" data-page="4" aria-label="Page 4">4</button>
  <button type="button" aria-label="Next page" data-page="next"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</nav>

With a count

Showing 21 to 30 of 248

Code

<div class="flex items-center justify-between flex-wrap gap-3">
  <span class="muted text-sm">Showing 21 to 30 of 248</span>
  <nav class="pagination" aria-label="Pagination" data-pager data-pages="25">
    <button type="button" aria-label="Previous page" data-page="prev"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    <button type="button" data-page="1" aria-label="Page 1">1</button>
    <button type="button" data-page="2" aria-label="Page 2">2</button>
    <button type="button" data-page="3" aria-label="Page 3" aria-current="page">3</button>
    <button type="button" data-page="4" aria-label="Page 4">4</button>
    <span>…</span>
    <button type="button" data-page="25" aria-label="Page 25">25</button>
    <button type="button" aria-label="Next page" data-page="next"><svg class="icon icon-sm icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </nav>
</div>