---
name: Pagination
description: Display previous page and/or next page buttons to navigate through paginated pages.
variables:
  paginator:
    - object
    - The Bridgetown Paginator object ([see documentation here](https://www.bridgetownrb.com/docs/content/pagination/))
mocks:
  paginator:
    total_pages: 3
    previous_page: true
    previous_page_path: "#previous"
    next_page: true
    next_page_path: "#next"
---
{% if paginator.total_pages > 1 %}
  <ul class="pagination mt-6">
    {% if paginator.previous_page %}
      <li>
        <a href="{{ paginator.previous_page_path }}" class="button is-primary is-outlined is-small"><span class="icon"><i class="fa fa-arrow-left"></i></span> <span>Previous Page</span></a>
      </li>
    {% else %}
      <li></li>
    {% endif %}
    {% if paginator.next_page %}
      <li>
        <a href="{{ paginator.next_page_path }}" class="button is-primary is-outlined is-small"><span>Next Page</span> <span class="icon"><i class="fa fa-arrow-right"></i></span></a>
      </li>
    {% endif %}
  </ul>
{% endif %}