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-h-10 uc-px-3">Previous</button>
  <button class="uc-h-10 uc-w-10 uc-rounded-lg uc-border">1</button>
  <button class="uc-h-10 uc-w-10 uc-bg-accents-blue uc-text-constant-white">2</button>
  <button class="uc-h-10 uc-w-10 uc-rounded-lg uc-border">3</button>
  <span>...</span>
  <button class="uc-h-10 uc-px-3">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-h-10 uc-px-4 uc-rounded-lg uc-border uc-border-border-strong">
    <svg class="uc-w-4 uc-h-4">...</svg> Previous
  </button>
  <button class="uc-h-10 uc-px-4 uc-rounded-lg uc-border uc-border-border-strong">
    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-h-9 uc-w-9 uc-rounded-lg uc-border">...</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-h-8 uc-w-8 uc-rounded-lg uc-border"><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-h-8 uc-w-8 uc-rounded-lg uc-border"><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-h-10 uc-w-10 uc-rounded-lg uc-border" title="First">
    <svg><!-- ChevronsLeft --></svg>
  </button>
  <button class="uc-h-10 uc-w-10 uc-rounded-lg uc-border" title="Previous">
    <svg><!-- ChevronLeft --></svg>
  </button>
  <button class="uc-h-10 uc-w-10 uc-rounded-lg uc-border">1</button>
  <button class="uc-h-10 uc-w-10 uc-bg-accents-blue uc-text-constant-white">3</button>
  <button class="uc-h-10 uc-w-10 uc-rounded-lg uc-border">5</button>
  <button class="uc-h-10 uc-w-10 uc-rounded-lg uc-border" title="Next">
    <svg><!-- ChevronRight --></svg>
  </button>
  <button class="uc-h-10 uc-w-10 uc-rounded-lg uc-border" title="Last">
    <svg><!-- ChevronsRight --></svg>
  </button>
</nav>

API Reference

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

Class	Type	Description
`uc-h-10 uc-w-10`	Size	Default page button size (40×40px)
`uc-h-9 uc-w-9`	Size	Compact page button size (36×36px)
`uc-h-8 uc-w-8`	Size	Small page button size (32×32px)
`uc-bg-accents-blue uc-text-constant-white`	State	Active page button — filled with accent color
`uc-border uc-border-border-strong`	Variant	Inactive page button — border only
`uc-h-10 uc-px-3`	Button	Previous/Next button with text (auto width)
`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