Pagination helps users navigate large datasets by breaking them into multiple pages. It improves UX by keeping content manageable and improving performance.

Large pagination

<nav class="pagination--nav" aria-label="navigation">
  <ul class="pagination display--flex">
      <li class="page--item disabled"><button class="page--link blueprint-icon icon-chevron_left" type="button"></button></li>
      <li class="page--item active"><button class="page--link" type="button">1</button></li>
      <li class="page--item"><button class="page--link" type="button">2</button></li>
      <li class="page--item"><button class="page--link" type="button">3</button></li>
      <li class="page--item"><button class="page--link blueprint-icon icon-chevron_right" type="button"></button></li>
  </ul>
</nav>

Large pagination with dots

<nav class="pagination--nav" aria-label="navigation">
  <ul class="pagination display--flex">
      <li class="page--item disabled"><button class="page--link blueprint-icon icon-chevron_left" type="button"></button></li>
      <li class="page--item active"><button class="page--link" type="button">1</button></li>
      <li class="page--item"><button class="page--link" type="button">2</button></li>
      <li class="page--item"><button class="page--link" type="button">3</button></li>
      <li class="page--item page--item--parent"><button class="page--link page--link--dots" type="button">...</button></li>
      <li class="page--item"><button class="page--link" type="button">20</button></li>
      <li class="page--item"><button class="page--link blueprint-icon icon-chevron_right" type="button"></button></li>
  </ul>
</nav>