Application toolkit - Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Examples

A basic form of pagination.

Open this basic pagination example in new window
Copy basic pagination code 
<nav class="flex items-center space-x-2">
  <a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center gap-2 rounded-md" href="#">
    Previous
  </a>
  <a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
  <a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
  <a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
  <a class="text-gray-500 hover:text-blue-600 p-3 inline-flex items-center gap-2 rounded-md" href="#">
    Next
  </a>
</nav>
Close basic pagination code

Working with icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.

Open this icons pagination example in new window
Copy icons pagination code 
<nav class="flex items-center space-x-2">
  <a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
    <span aria-hidden="true">«</span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
  <a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
    <span class="sr-only">Next</span>
    <span aria-hidden="true">»</span>
  </a>
</nav>
Close icons pagination code

Disabled and active state

Pagination links are customizable for different circumstances.

Open this disabled and active pagination example in new window
Copy disabled and active pagination code 
<nav class="flex items-center space-x-2">
  <a class="text-gray-400 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md pointer-events-none" href="#">
    <span aria-hidden="true">«</span>
    <span>Previous</span>
  </a>
  <a class="w-10 h-10 bg-hs2-primary text-white p-4 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
  <a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
    <span>Next</span>
    <span aria-hidden="true">»</span>
  </a>
</nav>
Close disabled and active pagination code

Alignment

Change the alignment of pagination components.

Open this centered pagination example in new window
Copy centered pagination code 
<nav class="flex justify-center items-center space-x-2">
  <a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
    <span aria-hidden="true">«</span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="w-10 h-10 bg-hs2-primary text-white p-4 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
  <a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
    <span class="sr-only">Next</span>
    <span aria-hidden="true">»</span>
  </a>
</nav>
Close centered pagination code
Open this right aligned pagination example in new window
Copy right aligned pagination code 
<nav class="flex justify-end items-center space-x-2">
  <a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
    <span aria-hidden="true">«</span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="w-10 h-10 bg-hs2-primary text-white p-4 inline-flex items-center text-sm font-medium rounded-full" href="#" aria-current="page">1</a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">2</a>
  <a class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full" href="#">3</a>
  <a class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md" href="#">
    <span class="sr-only">Next</span>
    <span aria-hidden="true">»</span>
  </a>
</nav>
Close right aligned pagination code