BlueStack.io - Component Library

Basic Pagination

Preview Code

Copy

<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

Preview Code

Copy

<div class="pagination">
  <button class="page-btn first">
    <i class="icon chevron-double-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 chevron-double-right w-4 h-4"></i>
  </button>
</div>

With Ellipsis for Many Pages

Preview Code

Copy

...

<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

Preview Code

Copy

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>

Circular Buttons

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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)

Preview Code

Copy

<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>

With Direct Page Input

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

<!-- Tiny -->
<div class="pagination tiny">
  <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 small">
  <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 large">
  <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 big">
  <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 tiny">
    <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 small">
    <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 large">
    <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 big">
    <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

Preview Code

Copy

<!-- 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>

Disabled States

Preview Code

Copy

<div class="pagination">
  <button class="page-btn first" disabled>
    <i class="icon chevron-double-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 chevron-double-right w-4 h-4"></i>
  </button>
</div>

Loading State

Preview Code

Copy

<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 Example with All Features

Preview Code

Copy

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 chevron-double-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 chevron-double-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 chevron-double-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 chevron-double-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

Preview Code

Copy

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 chevron-double-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 chevron-double-right w-4 h-4"></i>
    </button>
  </div>
</div>