css/docs/content/components/pagination.md

title	path	status	source	bundle
Pagination	components/pagination	New	https://github.com/primer/css/tree/master/src/pagination	pagination

Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).

Previous/next pagination

You can make a very simple pagination container with just the Previous and Next buttons. Add the class disabled to the Previous button if there isn't a preceding page, or to the Next button if there isn't a succeeding page.

<nav class="paginate-container" aria-label="Pagination">
  <div class="pagination">
    <span class="previous_page disabled">Previous</span>
    <a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
  </div>
</nav>

Numbered pagination

For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.

To do this, add anchor links to the pagination element. Previous and Next buttons should always be present. Add the class disabled to the Previous button if you're on the first page. Apply the class current to the current numbered page.

As always, make sure to include the appropriate aria attributes to make the element accessible.

• Add aria-label="Pagination" to the the paginate-container element.
• Add aria-current="true" to the current page marker.
• Add aria-label="Page X" to each anchor link.

<nav class="paginate-container" aria-label="Pagination">
  <div class="pagination">
    <span class="previous_page disabled">Previous</span>
    <em class="current selected" aria-current="true">1</em>
    <a href="#url" aria-label="Page 2">2</a>
    <a href="#url" aria-label="Page 3">3</a>
    <span class="gap">…</span>
    <a href="#url" aria-label="Page 8">8</a>
    <a href="#url" aria-label="Page 9">9</a>
    <a href="#url" aria-label="Page 10">10</a>
    <a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
  </div>
</nav>