Pagination — uicraft

Default

Standard pagination with page numbers, ellipsis, and previous/next navigation.

html

<nav class="uc-flex uc-items-center uc-gap-1">
  <button class="uc-page-btn uc-px-3 uc-w-auto">Previous</button>
  <button class="uc-page-btn">1</button>
  <button class="uc-page-btn uc-active">2</button>
  <button class="uc-page-btn">3</button>
  <span>...</span>
  <button class="uc-page-btn uc-px-3 uc-w-auto">Next</button>
</nav>

Simple

Just previous and next buttons without page numbers. Good for mobile or simpler layouts.

html

<nav class="uc-flex uc-items-center uc-gap-3">
  <button class="uc-page-btn uc-px-4 uc-w-auto uc-gap-2">
    <svg class="uc-w-4 uc-h-4">...</svg> Previous
  </button>
  <button class="uc-page-btn uc-px-4 uc-w-auto uc-gap-2">
    Next <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
</nav>

With Page Size

Pagination with a page size selector to control the number of items per page.

html

<nav class="uc-flex uc-items-center uc-gap-6">
  <div class="uc-flex uc-items-center uc-gap-2">
    <span class="uc-text-sm uc-text-fg-disabled">Rows per page</span>
    <select class="uc-h-9 uc-w-[70px] uc-rounded-lg uc-border">
      <option>10</option>
      <option>20</option>
    </select>
  </div>
  <span class="uc-text-sm uc-text-fg-disabled">Page 2 of 10</span>
  <div class="uc-flex uc-items-center uc-gap-1">
    <button class="uc-page-btn uc-h-9 uc-w-9 uc-min-w-0">...</button>
  </div>
</nav>

Compact

A smaller, minimal pagination showing the current page out of the total, with arrow navigation.

html

<nav class="uc-flex uc-items-center uc-gap-2">
  <button class="uc-page-btn uc-h-8 uc-w-8 uc-min-w-0"><svg>...</svg></button>
  <span class="uc-text-sm uc-text-fg-disabled uc-px-3">
    Page <span class="uc-font-medium">1</span> of <span class="uc-font-medium">10</span>
  </span>
  <button class="uc-page-btn uc-h-8 uc-w-8 uc-min-w-0"><svg>...</svg></button>
</nav>

With Icons

Icon-based navigation with first, previous, next, and last page controls using chevron icons.

html

<nav class="uc-flex uc-items-center uc-gap-1">
  <button class="uc-page-btn" title="First">
    <svg><!-- ChevronsLeft --></svg>
  </button>
  <button class="uc-page-btn" title="Previous">
    <svg><!-- ChevronLeft --></svg>
  </button>
  <button class="uc-page-btn">1</button>
  <button class="uc-page-btn uc-active">3</button>
  <button class="uc-page-btn">5</button>
  <button class="uc-page-btn" title="Next">
    <svg><!-- ChevronRight --></svg>
  </button>
  <button class="uc-page-btn" title="Last">
    <svg><!-- ChevronsRight --></svg>
  </button>
</nav>

Anatomy

HTML structure of the Pagination component.

nav.uc-flex.uc-items-center.uc-gap-1       ← Pagination container
├── button (prev)                          ← Previous page button
├── button.uc-page-btn                     ← Page number button
├── button.uc-page-btn.uc-active           ← Active page button
├── span (…)                              ← Ellipsis / truncation
└── button (next)                          ← Next page button

API Reference

All data attributes and utility classes available for the Pagination component.

Class	Type	Description
`uc-page-btn`	Base	Page button — default 40×40px, rounded, border, centered content
`uc-page-btn uc-active`	State	Active page button — filled with accent color
`uc-page-btn uc-px-3 uc-w-auto`	Button	Previous/Next button with text (auto width)
`uc-h-9 uc-w-9 uc-min-w-0`	Size	Compact page button size (36×36px)
`uc-h-8 uc-w-8 uc-min-w-0`	Size	Small page button size (32×32px)
`aria-current="page"`	Attribute	Marks the current active page for screen readers

Accessibility

Keyboard and screen reader support.

Feature	Details
Semantic HTML	Use <nav> with aria-label="Pagination" for the wrapper
Current Page	Use aria-current="page" on the active page button
Disabled State	Disable and use aria-disabled="true" on prev/next at boundaries
Button Labels	Icon-only buttons need aria-label (e.g., "Go to page 5")
Keyboard	All buttons must be keyboard accessible via Tab and Enter/Space