Pagination
A Tailwind CSS pagination component for navigating between pages, built using the button component.
<nav class="flex flex-wrap items-center gap-1">
<a href="#" class="btn btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
<span class="hidden sm:block">Previous</span>
</a>
<a href="#" class="btn btn-ghost btn-icon">1</a>
<a href="#" class="btn btn-outline btn-icon" aria-current="page">2</a>
<a href="#" class="btn btn-ghost btn-icon">3</a>
<a href="#" class="btn btn-ghost">
<span class="hidden sm:block">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</a>
</nav>With ellipsis
Use an ellipsis to indicate additional pages between visible page numbers.
<nav class="flex flex-wrap items-center gap-1">
<a href="#" class="btn btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
<span class="hidden sm:block">Previous</span>
</a>
<a href="#" class="btn btn-ghost btn-icon">1</a>
<a href="#" class="btn btn-outline btn-icon" aria-current="page">2</a>
<a href="#" class="btn btn-ghost btn-icon">3</a>
<span class="flex size-9 items-center justify-center" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</span>
<a href="#" class="btn btn-ghost btn-icon">9</a>
<a href="#" class="btn btn-ghost btn-icon">10</a>
<a href="#" class="btn btn-ghost">
<span class="hidden sm:block">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</a>
</nav>Sizes
Use button size classes like btn-sm and btn-icon-sm for a more compact pagination.
<nav class="flex flex-wrap items-center gap-1">
<a href="#" class="btn btn-ghost btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
Previous
</a>
<a href="#" class="btn btn-ghost btn-icon-sm">1</a>
<a href="#" class="btn btn-outline btn-icon-sm" aria-current="page">2</a>
<a href="#" class="btn btn-ghost btn-icon-sm">3</a>
<a href="#" class="btn btn-ghost btn-sm">
Next
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</a>
</nav>How it works
Pagination is just a nav element with utility classes wrapping button components.
Structure
A pagination is a nav element with flexbox utilities and button classes for the items:
<nav class="flex flex-wrap items-center gap-1">
<a href="#" class="btn btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
<span class="hidden sm:block">Previous</span>
</a>
<a href="#" class="btn btn-ghost btn-icon">1</a>
<a href="#" class="btn btn-outline btn-icon" aria-current="page">2</a>
<a href="#" class="btn btn-ghost btn-icon">3</a>
<a href="#" class="btn btn-ghost">
<span class="hidden sm:block">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</a>
</nav>Use btn-ghost for page links and btn-outline for the active page.
Accessibility
For proper screen reader support, add these attributes:
| Attribute | Description |
|---|---|
aria-current | Add to the current page link to indicate the active page |
aria-label | Add to icon-only buttons to provide accessible text |
aria-hidden | Add to ellipsis elements to hide them from screen readers |
<nav class="flex flex-wrap items-center gap-1">
<a href="#" class="btn btn-ghost btn-icon" aria-label="Previous">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</a>
<a href="#" class="btn btn-outline btn-icon" aria-current="page">1</a>
<span class="flex size-9 items-center justify-center" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</span>
<a href="#" class="btn btn-ghost btn-icon" aria-label="Next">
<svg xmlns="http://www.w3.org/2000/svg" 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"></path></svg>
</a>
</nav>Class reference
This component uses button classes. No additional pagination-specific classes are needed.
<nav class="flex flex-wrap items-center gap-1">
<a href="#" class="btn btn-ghost btn-icon">1</a>
<span class="flex size-9 items-center justify-center" aria-hidden="true">...</span>
<a href="#" class="btn btn-ghost btn-icon">10</a>
</nav>