Pagination

Pagination provides compact page navigation with an explicit current-page state. The Office style keeps 32-pixel controls on precise pointers and preserves 44-pixel targets on coarse pointers.

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Pagination component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/pagination.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/styles/a3s.css";

Pagination composes its layout contract with Button component controls.

Using CDN or bundler imports? See the Installation page.

Add your pagination HTML

Use the dedicated root class, a list, page links, and aria-current="page":

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li>
      <a href="?page=1" class="btn" data-variant="ghost" aria-label="Previous page">
        <svg data-rtl-flip ...></svg>
        <span data-pagination-label>Previous</span>
      </a>
    </li>
    <li><a href="?page=1" class="btn" data-variant="ghost" data-size="icon" aria-label="Page 1">1</a></li>
    <li><a href="?page=2" class="btn" data-variant="outline" data-size="icon" aria-label="Page 2" aria-current="page">2</a></li>
    <li><a href="?page=3" class="btn" data-variant="ghost" data-size="icon" aria-label="Page 3">3</a></li>
    <li><span data-pagination-ellipsis aria-hidden="true"><svg ...></svg></span></li>
    <li>
      <a href="?page=3" class="btn" data-variant="ghost" aria-label="Next page">
        <span data-pagination-label>Next</span>
        <svg data-rtl-flip ...></svg>
      </a>
    </li>
  </ul>
</nav>

Examples

RTL

Pagination uses document direction and logical spacing. Set dir="rtl" on the pagination root or a parent.

#Pagination

#Usage

Include CSS

Add your pagination HTML

#Examples

#RTL

Pagination

Usage

Examples

RTL