Pagination

Navigation aid that divides content into discrete pages, allowing users to navigate through large sets of data.

Class name	Type
`.prs-pagination`	Component	Container
`.prs-pagination-pager`	Component	Page navigation
`.prs-pagination-pager_disabled`	State	Page navigation disabled

Default

Just use browser accessible markup aria-current="true" to show the current page.

<nav class="prs-pagination" role="navigation" aria-label="Pagination">
  <ul>
    <li class="prs-pagination-pager prs-pagination-pager_disabled"><a href="#" aria-label="Previous Page"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#chevron-left" /></svg></a></li>
    <li><a href="#" aria-label="Current Page, Page 1" aria-current="true" aria-label="Go to Page 1">1</a></li>
    <li><a href="#" aria-label="Go to Page 2">2</a></li>
    <li><a href="#" aria-label="Go to Page 3">3</a></li>
    <li><a href="#" aria-label="Go to Page 4">4</a></li>
    <li><a href="#" aria-label="Go to Page 5">5</a></li>
    <li class="prs-pagination-pager"><a href="#" aria-label="Next Page"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#chevron-right" /></svg></a></li>
  </ul>
</nav>

<!-- this is just for demo purposes -->
<script>
  document.querySelectorAll('.prs-pagination a').forEach(link => { link.addEventListener('click', function(event) { event.preventDefault() }) });
</script>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-pagination {
  > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  a {
    width: 2.125rem;
    height: 2.125rem;
    color: var(--prs-c-aqua);
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: var(--prs-transition-property);
    transition-timing-function: var(--prs-transition-timing);
    transition-duration: var(--prs-transition-duration);

    &:hover {
      background-color: var(--prs-c-gray-200);
      color: var(--prs-c-gray-900);
    }

    &:focus-visible {
      outline: 2px solid var(--prs-c-aqua);
      outline-offset: 1px;
    }

    &[aria-current="true"],
    &[aria-current="true"]:hover {
      background-color: var(--prs-c-aqua);
      color: var(--prs-c-white);
    }
  }

  .prs-pagination-pager {
    display: flex;
    align-items: center;
    justify-content: center;

    &:first-child {
      padding-right: 1.5rem;
    }

    &:last-child {
      padding-left: 1.5rem;
    }

    a {
      width: 1.5rem;
      height: 1.5rem;

      &:hover {
        background-color: transparent;
        color: var(--prs-c-gray-900);
      }
    }
  }

  .prs-pagination-pager_disabled a {
    color: var(--prs-c-gray-400);
    pointer-events: none;
  }
}

Figma

Coming soon...