Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Basic Example
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas.
<!-- pagination start -->
<nav class="flex items-center gap-x-1">
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
<span>Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
aria-current="page"
>
1
</button>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
2
</button>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
3
</button>
</div>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
<span>Next</span>
</button>
</nav>
<!-- pagination end -->With Icons
The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.
<!-- pagination start -->
<nav class="flex items-center gap-x-1">
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
<svg
class="flex-shrink-0 w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m15 18-6-6 6-6" />
</svg>
<span>Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
aria-current="page"
>
1
</button>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
2
</button>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
3
</button>
</div>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
<span>Next</span>
<svg
class="flex-shrink-0 w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- pagination end -->Disabled and active states
Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.
<!-- pagination start -->
<nav class="flex items-center gap-x-1">
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
disabled
>
<svg
class="flex-shrink-0 w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m15 18-6-6 6-6" />
</svg>
<span>Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
aria-current="page"
>
1
</button>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md text-white border
bg-indigo-600 border-indigo-600 hover:bg-indigo-600 focus:outline-none
focus:bg-indigo-600 disabled:opacity-50 disabled:pointer-events-none"
>
2
</button>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
3
</button>
</div>
<button
type="button"
class="min-h-[36px] min-w-[36px] py-2 px-2.5
inline-flex justify-center items-center gap-x-1.5 rounded-md border bg-white
border-gray-300 text-gray-800 hover:bg-gray-300 focus:outline-none
focus:bg-gray-300 disabled:opacity-50 disabled:pointer-events-none"
>
<span>Next</span>
<svg
class="flex-shrink-0 w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- pagination end -->