Pagination

Navigate between pages of content with page numbers, prev/next buttons.

Default

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

html

<nav class="vt-flex vt-items-center vt-gap-1">
  <!-- Previous -->
  <button class="vt-page-btn vt-px-3 vt-w-auto vt-text-foreground-muted">
    <svg 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" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
      <path d="m15 18-6-6 6-6"></path>
    </svg>
    Previous
  </button>
  <!-- Page 1 -->
  <button class="vt-page-btn">1</button>
  <!-- Page 2 (active) -->
  <button class="vt-page-btn vt-active">2</button>
  <!-- Page 3 -->
  <button class="vt-page-btn">3</button>
  <!-- Ellipsis -->
  <span class="vt-inline-flex vt-items-center vt-justify-center vt-h-10 vt-w-10 vt-text-sm vt-text-foreground-muted">...</span>
  <!-- Page 10 -->
  <button class="vt-page-btn">10</button>
  <!-- Next -->
  <button class="vt-page-btn vt-px-3 vt-w-auto vt-text-foreground-muted">
    Next
    <svg 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" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
</nav>

Simple

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

html

<nav class="vt-flex vt-items-center vt-gap-3">
  <!-- Previous -->
  <button class="vt-page-btn vt-px-4 vt-w-auto vt-gap-2">
    <svg 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" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
      <path d="m15 18-6-6 6-6"></path>
    </svg>
    Previous
  </button>
  <!-- Next -->
  <button class="vt-page-btn vt-px-4 vt-w-auto vt-gap-2">
    Next
    <svg 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" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
</nav>

With Page Size

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

html

<nav class="vt-flex vt-items-center vt-gap-6">
  <!-- Page size selector -->
  <div class="vt-flex vt-items-center vt-gap-2">
    <span class="vt-text-sm vt-text-foreground-muted">Rows per page</span>
    <div class="vt-relative">
      <select class="vt-h-10 vt-w-[70px] vt-rounded-lg vt-border vt-border-border-strong vt-bg-surface-card vt-px-3 vt-py-1 vt-text-sm vt-focus:outline-none vt-focus:ring-2 vt-focus:ring-info-fill vt-focus:ring-offset-2 vt-ring-offset-surface-page vt-appearance-none vt-cursor-pointer" aria-label="Select an option">
        <option>10</option>
        <option>20</option>
        <option>50</option>
        <option>100</option>
      </select>
      <svg 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" aria-hidden="true" class="lucide lucide-chevron-down vt-pointer-events-none vt-absolute vt-right-2 vt-top-1/2 vt--translate-y-1/2 vt-w-4 vt-h-4 vt-text-foreground-muted">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </div>
  </div>
  <!-- Page info -->
  <span class="vt-text-sm vt-text-foreground-muted">Page 2 of 10</span>
  <!-- Page navigation -->
  <div class="vt-flex vt-items-center vt-gap-1">
    <button class="vt-page-btn vt-h-10 vt-w-10 vt-min-w-0" title="Previous page">
      <svg 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" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
        <path d="m15 18-6-6 6-6"></path>
      </svg>
    </button>
    <button class="vt-page-btn vt-h-10 vt-w-10 vt-min-w-0">1</button>
    <button class="vt-page-btn vt-active vt-h-10 vt-w-10 vt-min-w-0">2</button>
    <button class="vt-page-btn vt-h-10 vt-w-10 vt-min-w-0">3</button>
    <span class="vt-inline-flex vt-items-center vt-justify-center vt-h-10 vt-w-10 vt-text-sm vt-text-foreground-muted">...</span>
    <button class="vt-page-btn vt-h-10 vt-w-10 vt-min-w-0">10</button>
    <button class="vt-page-btn vt-h-10 vt-w-10 vt-min-w-0" title="Next page">
      <svg 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" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </button>
  </div>
</nav>

Compact

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

html

<nav class="vt-flex vt-items-center vt-gap-2">
  <!-- Previous arrow -->
  <button class="vt-page-btn vt-h-8 vt-w-8 vt-min-w-0">
    <svg 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" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
      <path d="m15 18-6-6 6-6"></path>
    </svg>
  </button>
  <!-- Page info -->
  <span class="vt-text-sm vt-text-foreground-muted vt-px-3">Page <span class="vt-font-medium vt-text-foreground-primary">1</span> of <span class="vt-font-medium vt-text-foreground-primary">10</span></span>
  <!-- Next arrow -->
  <button class="vt-page-btn vt-h-8 vt-w-8 vt-min-w-0">
    <svg 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" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
</nav>

With Icons

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

html

<nav class="vt-flex vt-items-center vt-gap-1">
  <!-- First page (chevron-double-left) -->
  <button class="vt-page-btn" title="First page">
    <svg 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" aria-hidden="true" class="lucide lucide-chevrons-left vt-w-4 vt-h-4">
      <path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path>
    </svg>
  </button>
  <!-- Previous page (chevron-left) -->
  <button class="vt-page-btn" title="Previous page">
    <svg 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" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
      <path d="m15 18-6-6 6-6"></path>
    </svg>
  </button>
  <!-- Page numbers -->
  <button class="vt-page-btn">1</button>
  <button class="vt-page-btn">2</button>
  <button class="vt-page-btn vt-active">3</button>
  <button class="vt-page-btn">4</button>
  <button class="vt-page-btn">5</button>
  <!-- Next page (chevron-right) -->
  <button class="vt-page-btn" title="Next page">
    <svg 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" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
  <!-- Last page (chevron-double-right) -->
  <button class="vt-page-btn" title="Last page">
    <svg 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" aria-hidden="true" class="lucide lucide-chevrons-right vt-w-4 vt-h-4">
      <path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path>
    </svg>
  </button>
</nav>

Guidelines

Navigating pages of long lists/tables. Do not paginate under ~20 items.

Mark the current page with vt-active so position is clear.

Don't

Don't mark two pages active — only one page is current.

Anatomy

HTML structure of the Pagination component.

nav.vt-flex.vt-items-center.vt-gap-1       ← Pagination container
├── button (prev)                          ← Previous page button
├── button.vt-page-btn                     ← Page number button
├── button.vt-page-btn.vt-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
`vt-page-btn`	Base	Page button — default 40×40px, rounded, border, centered content
`vt-page-btn vt-active`	State	Active page button — filled with accent color
`vt-page-btn vt-px-3 vt-w-auto`	Button	Previous/Next button with text (auto width)
`vt-h-10 vt-w-10 vt-min-w-0`	Size	Compact page button size (36×36px)
`vt-h-8 vt-w-8 vt-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

Built with:

Button Icons