pagination component

Drop-in semantic component. See examples, sizes, variants, and source.

Page navigation built from a pagination container with page-btn children plus optional prev / next / first / last / ellipsis elements. Style modifiers (circular, grouped, bordered, compact) and color modifiers layer on top. Wire up dynamic page-change behavior through pagination.js.

Basic Pagination

<div class="pagination">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

With First and Last Buttons

<div class="pagination">
  <button class="page-btn first">
    <i class="icon chevrons-left w-4 h-4"></i>
  </button>
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
  <button class="page-btn last">
    <i class="icon chevrons-right w-4 h-4"></i>
  </button>
</div>

With Ellipsis for Many Pages

...

<div class="pagination">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn">2</button>
  <button class="page-btn active">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <span class="ellipsis">...</span>
  <button class="page-btn">20</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

With Page Information

Page 2 of 16

<div class="pagination with-info">
  <span class="page-info">Page 2 of 16</span>
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

Style Variants

Circular Buttons

<div class="pagination circular">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

Grouped Style

<div class="pagination grouped">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

Bordered Container

<div class="pagination bordered">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

Compact (Mobile-Friendly)

<div class="pagination compact">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

Inputs and Selectors

With Direct Page Input

of 20

<div class="pagination with-input">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <div class="page-input-wrapper">
    <input type="number" class="page-input" value="2" min="1" max="20" />
    <span class="page-total">of 20</span>
  </div>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

With Items Per Page Selector

Show: items per page

<div class="pagination-wrapper">
  <div class="pagination">
    <button class="page-btn prev">
      <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn next">
      <i class="icon chevron-right w-4 h-4"></i>
    </button>
  </div>
  <div class="items-per-page">
    <label>Show:</label>
    <select class="per-page-select">
      <option value="10">10</option>
      <option value="25" selected>25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
    <span>items per page</span>
  </div>
</div>

Size Variants

<!-- Tiny -->
<div class="pagination xs">
  <button class="page-btn prev">
    <i class="icon chevron-left w-3 h-3"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-3 h-3"></i>
  </button>
</div>

<!-- Small -->
<div class="pagination sm">
  <button class="page-btn prev">
    <i class="icon chevron-left w-3.5 h-3.5"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-3.5 h-3.5"></i>
  </button>
</div>

<!-- Default -->
<div class="pagination">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<!-- Large -->
<div class="pagination xl">
  <button class="page-btn prev">
    <i class="icon chevron-left w-5 h-5"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-5 h-5"></i>
  </button>
</div>

<!-- Big -->
<div class="pagination lg">
  <button class="page-btn prev">
    <i class="icon chevron-left w-6 h-6"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-6 h-6"></i>
  </button>
</div>

<div class="pagination xs">
  <button class="page-btn prev">
    <i class="icon chevron-left w-3 h-3"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-3 h-3"></i>
  </button>
</div>

<div class="pagination sm">
  <button class="page-btn prev">
    <i class="icon chevron-left w-3.5 h-3.5"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-3.5 h-3.5"></i>
  </button>
</div>

<div class="pagination">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<div class="pagination xl">
  <button class="page-btn prev">
    <i class="icon chevron-left w-5 h-5"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-5 h-5"></i>
  </button>
</div>

<div class="pagination lg">
  <button class="page-btn prev">
    <i class="icon chevron-left w-6 h-6"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-6 h-6"></i>
  </button>
</div>

Color Variants

<!-- Primary -->
<div class="pagination primary">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<!-- Positive -->
<div class="pagination positive">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<!-- Negative -->
<div class="pagination negative">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<!-- Warning -->
<div class="pagination warning">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<!-- Purple -->
<div class="pagination purple">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<div class="pagination primary">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<div class="pagination positive">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<div class="pagination negative">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<div class="pagination warning">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

<div class="pagination purple">
  <button class="page-btn prev">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn">1</button>
  <button class="page-btn active">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

States

Disabled States

<div class="pagination">
  <button class="page-btn first" disabled>
    <i class="icon chevrons-left w-4 h-4"></i>
  </button>
  <button class="page-btn prev" disabled>
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn active">1</button>
  <button class="page-btn">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">4</button>
  <button class="page-btn">5</button>
  <button class="page-btn next">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
  <button class="page-btn last">
    <i class="icon chevrons-right w-4 h-4"></i>
  </button>
</div>

Loading State

<div class="pagination loading">
  <button class="page-btn prev" disabled>
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <button class="page-btn" disabled>
    <span class="loading-spinner"></span>
  </button>
  <button class="page-btn" disabled>
    <span class="loading-spinner"></span>
  </button>
  <button class="page-btn" disabled>
    <span class="loading-spinner"></span>
  </button>
  <button class="page-btn next" disabled>
    <i class="icon chevron-right w-4 h-4"></i>
  </button>
</div>

Advanced Examples

Advanced Example with All Features

Showing 11-20 of 245 results

... ...

Items per page:

<div class="pagination-container">
  <div class="pagination-info">
    <span class="total-items">Showing 11-20 of 245 results</span>
  </div>
  <div class="pagination primary grouped">
    <button class="page-btn first" aria-label="First page">
      <i class="icon chevrons-left w-4 h-4"></i>
    </button>
    <button class="page-btn prev" aria-label="Previous page">
      <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <span class="ellipsis">...</span>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn active" aria-current="page">6</button>
    <button class="page-btn">7</button>
    <button class="page-btn">8</button>
    <span class="ellipsis">...</span>
    <button class="page-btn">25</button>
    <button class="page-btn next" aria-label="Next page">
      <i class="icon chevron-right w-4 h-4"></i>
    </button>
    <button class="page-btn last" aria-label="Last page">
      <i class="icon chevrons-right w-4 h-4"></i>
    </button>
  </div>
  <div class="items-per-page">
    <label for="items-per-page">Items per page:</label>
    <select id="items-per-page" class="per-page-select">
      <option value="10" selected>10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>
</div>

<div class="pagination-container">
  <div class="pagination-info">
    <span class="total-items">Showing 11-20 of 245 results</span>
  </div>
  <div class="pagination primary grouped">
    <button class="page-btn first" aria-label="First page">
      <i class="icon chevrons-left w-4 h-4"></i>
    </button>
    <button class="page-btn prev" aria-label="Previous page">
      <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <span class="ellipsis">...</span>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <button class="page-btn active" aria-current="page">6</button>
    <button class="page-btn">7</button>
    <button class="page-btn">8</button>
    <span class="ellipsis">...</span>
    <button class="page-btn">25</button>
    <button class="page-btn next" aria-label="Next page">
      <i class="icon chevron-right w-4 h-4"></i>
    </button>
    <button class="page-btn last" aria-label="Last page">
      <i class="icon chevrons-right w-4 h-4"></i>
    </button>
  </div>
  <div class="items-per-page">
    <label for="items-per-page">Items per page:</label>
    <select id="items-per-page" class="per-page-select">
      <option value="10" selected>10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>
</div>

Responsive Pagination

2 / 16

...

<div class="pagination responsive">
  <!-- Mobile: Show only essential controls -->
  <button class="page-btn prev md:hidden">
    <i class="icon chevron-left w-4 h-4"></i>
  </button>
  <span class="page-info md:hidden">2 / 16</span>
  <button class="page-btn next md:hidden">
    <i class="icon chevron-right w-4 h-4"></i>
  </button>

  <!-- Desktop: Show full pagination -->
  <div class="hidden md:flex pagination">
    <button class="page-btn first">
      <i class="icon chevrons-left w-4 h-4"></i>
    </button>
    <button class="page-btn prev">
      <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <span class="ellipsis">...</span>
    <button class="page-btn">16</button>
    <button class="page-btn next">
      <i class="icon chevron-right w-4 h-4"></i>
    </button>
    <button class="page-btn last">
      <i class="icon chevrons-right w-4 h-4"></i>
    </button>
  </div>
</div>

<div class="hidden md:flex pagination">
    <button class="page-btn first">
      <i class="icon chevrons-left w-4 h-4"></i>
    </button>
    <button class="page-btn prev">
      <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="page-btn">1</button>
    <button class="page-btn active">2</button>
    <button class="page-btn">3</button>
    <button class="page-btn">4</button>
    <button class="page-btn">5</button>
    <span class="ellipsis">...</span>
    <button class="page-btn">16</button>
    <button class="page-btn next">
      <i class="icon chevron-right w-4 h-4"></i>
    </button>
    <button class="page-btn last">
      <i class="icon chevrons-right w-4 h-4"></i>
    </button>
  </div>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`pagination`	Inline-flex container for the page buttons	Always required
	`page-btn`	Individual page button (number or icon)	Mark current page with `active`
	`ellipsis`	Non-interactive "..." gap between page ranges	Use a `span`
Sizes	`xs`	24px tall — tiny	Modifier on `pagination`
	`sm`	28px tall — small	Modifier on `pagination`
	(default)	32px tall — medium	No size class needed
	`xl`	36px tall — large	Modifier on `pagination`
	`lg`	40px tall — big	Modifier on `pagination`
Style Variants	`circular`	Round buttons (full radius)	Modifier on `pagination`
	`grouped`	Buttons share borders to form one segmented unit	Modifier on `pagination`
	`bordered`	Wraps the whole row in a bordered card	Modifier on `pagination`
	`compact`	Tighter sizing for mobile / dense layouts	Modifier on `pagination`
	`with-info`	Larger gap to separate `.page-info` from buttons	Modifier on `pagination`
	`with-input`	Spacing for an inline jump-to-page input	Pair with `.page-input-wrapper`
Color Modifiers	`primary`	Blue active + hover tint	Modifier on `pagination`
	`positive`	Green active + hover tint	Modifier on `pagination`
	`negative`	Red active + hover tint	Modifier on `pagination`
	`warning`	Yellow active + hover tint	Modifier on `pagination`
	`info`	Light blue active state	Modifier on `pagination`
	`purple`	Purple active + hover tint	Modifier on `pagination`
	`teal`	Teal active + hover tint	Modifier on `pagination`
	`pink`	Pink active + hover tint	Modifier on `pagination`
Button Modifiers	`active`	Marks current page (filled background)	Modifier on `page-btn`
	`prev` / `next`	Navigation arrows	Modifier on `page-btn`
	`first` / `last`	Jump-to-end navigation arrows	Modifier on `page-btn`
	`disabled`	HTML attribute — dim and lock the button	Attribute, not a class
	`loading`	Disables interaction; pair buttons with `.loading-spinner`	Modifier on `pagination`
	`responsive`	Centers a stripped-down mobile variant	Modifier on `pagination`
Layout / Wrapper	`page-info`	Inline page-X-of-Y label	Sibling of `.page-btn` elements
	`page-input-wrapper` + `page-input`	Jump-to-page numeric input	Pair with `.page-total`
	`items-per-page` + `per-page-select`	Page-size dropdown row	Stacks under pagination on mobile
	`pagination-wrapper`	Holds pagination + items-per-page side by side	Stacks vertically on small screens
	`pagination-container`	Three-column layout: info, pagination, items-per-page	Stacks vertically on small screens
	`loading-spinner`	Animated spinner for in-flight buttons	Place inside a `page-btn`