Design Kit

Pagination

Use pagination to separate long sets of data so that it is easier for a user to consume information.

Examples

Use the class a-pagination to render a pagination component.

Base

<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn" aria-label="Previous">
      <i class="a-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a href="#">
    <a href="#" class="a-btn">1</a>
    <a href="#" class="a-btn">2</a>
    <a href="#" class="a-btn">3</a>
    <a href="#" class="a-btn">4</a>
    <a href="#" class="a-btn">5</a>
    <a href="#" class="a-btn" aria-label="Next">
      <i class="a-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

Disabled

Apply the class -disabled to any link to render in a disabled state.

<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -disabled" aria-disabled="true">
      <i class="a-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn">1</a>
    <a href="#" class="a-btn">2</a>
    <a href="#" class="a-btn">3</a>
    <a href="#" class="a-btn">4</a>
    <a href="#" class="a-btn">5</a>
    <a href="#" class="a-btn" aria-label="Next">
      <i class="a-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

Active

Apply the class -active to indicate the current page.

<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn" aria-label="Previous">
      <i class="a-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn">1</a>
    <a href="#" class="a-btn">2</a>
    <a href="#" class="a-btn -active">3</a>
    <a href="#" class="a-btn">4</a>
    <a href="#" class="a-btn">5</a>
    <a href="#" class="a-btn" aria-label="Next">
      <i class="a-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>

Additional Sizes

Pagination supports three additional sizes: -sm, -lg, and -xl.

-sm

-lg

-xl

<!-- sm -->
<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -sm" aria-label="Previous">
      <i class="a-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn -sm">1</a>
    <a href="#" class="a-btn -sm">2</a>
    <a href="#" class="a-btn -sm">3</a>
    <a href="#" class="a-btn -sm">4</a>
    <a href="#" class="a-btn -sm">5</a>
    <a href="#" class="a-btn -sm" aria-label="Next">
      <i class="a-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>
<!-- lg -->
<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -lg" aria-label="Previous">
      <i class="a-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn -lg">1</a>
    <a href="#" class="a-btn -lg">2</a>
    <a href="#" class="a-btn -lg">3</a>
    <a href="#" class="a-btn -lg">4</a>
    <a href="#" class="a-btn -lg">5</a>
    <a href="#" class="a-btn -lg" aria-label="Next">
      <i class="a-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>
<!-- xl -->
<nav class="a-pagination" role="navigation" aria-label="Pagination">
  <div class="m-btnGroup">
    <a href="#" class="a-btn -xl" aria-label="Previous">
      <i class="a-icon icon-chevron-left" aria-hidden="true"></i>
      <span class="-sr--only">Previous</span>
    </a>
    <a href="#" class="a-btn -xl">1</a>
    <a href="#" class="a-btn -xl">2</a>
    <a href="#" class="a-btn -xl">3</a>
    <a href="#" class="a-btn -xl">4</a>
    <a href="#" class="a-btn -xl">5</a>
    <a href="#" class="a-btn -xl" aria-label="Next">
      <i class="a-icon icon-chevron-right" aria-hidden="true"></i>
      <span class="-sr--only">Next</span>
    </a>
  </div>
</nav>