Pagination

Previous / next controls with a compact page list (ellipsis when there are many pages). Pass currentPage, totalPages, and onPageChange from your state or URL. Complete Initialization first, then use the CLI or copy the source below.

Preview

Live

Add Pagination via CLI

After init and layout theme wiring (see MY_UI_THEME_LAYOUT.md in your project), add the Pagination component:

npm exec -- my-ui add pagination

Component source

<nav class="ui-pagination" aria-label="Pagination">
  <ul class="ui-pagination__list">
    <li class="ui-pagination__item"><button type="button" class="ui-pagination__btn" disabled>Previous</button></li>
    <li class="ui-pagination__item"><button type="button" class="ui-pagination__page ui-pagination__page--active" aria-current="page">1</button></li>
    <li class="ui-pagination__item"><button type="button" class="ui-pagination__page">2</button></li>
    <li class="ui-pagination__item"><button type="button" class="ui-pagination__btn">Next</button></li>
  </ul>
</nav>