Pagination

Use pagination to separate long sets of data so that it is easier for a user to consume information.

Examples

Base

<!-- For light backgrounds -->
<chi-pagination pages="5" current-page="3"></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="5" current-page="3" inverse></chi-pagination>
Use the class chi-pagination to render a pagination component.
<!-- For light backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat" aria-label="Page 1">1</button>
        <button class="chi-button -flat" aria-label="Page 2">2</button>
        <button class="chi-button -flat -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat" aria-label="Page 4">4</button>
        <button class="chi-button -flat" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
 <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Disabled

Disabled previous button

Disabled next button

Disabled previous button

Disabled next button

chi-paginationautomatically disables previous / next pages if current page is first or last
<!-- For light backgrounds -->
<chi-pagination pages="5" current-page="1"></chi-pagination>
<chi-pagination pages="5" current-page="5"></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="5" current-page="1" inverse></chi-pagination>
<chi-pagination pages="5" current-page="5" inverse></chi-pagination>
Add the attribute disabled to any button to render in a disabled state.
<!-- For light backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page" aria-disabled="true" disabled>
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -active" aria-label="Page 1">1</button>
        <button class="chi-button -flat" aria-label="Page 2">2</button>
        <button class="chi-button -flat" aria-label="Page 3">3</button>
        <button class="chi-button -flat" aria-label="Page 4">4</button>
        <button class="chi-button -flat" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light -disabled" aria-label="Previous page" aria-disabled="true">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light -active" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Truncation

When the number of pages exceeds the recommended 7 page limit, an ellipsis is used to truncate the remaining pages.

<!-- For light backgrounds -->
<chi-pagination pages="12" current-page="3"></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="12" current-page="3" inverse></chi-pagination>
<!-- For light backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat" aria-label="Page 1">1</button>
        <button class="chi-button -flat" aria-label="Page 2">2</button>
        <button class="chi-button -flat -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat" aria-label="Page 4">4</button>
        <button class="chi-button -flat" aria-label="Page 5">5</button>
        <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light" aria-label="Page 5">5</button>
        <div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat -light" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Double Truncation

Use double truncation when the current page is separated by 5 or more pages from the first and last page.

<!-- For light backgrounds -->
<chi-pagination pages="12" curent-page="6"></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="12" curent-page="6" inverse></chi-pagination>
<!-- For light backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat" aria-label="Page 1">1</button>
        <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat" aria-label="Page 4">4</button>
        <button class="chi-button -flat" aria-label="Page 5">5</button>
        <button class="chi-button -flat -active" aria-label="Page 6">6</button>
        <button class="chi-button -flat" aria-label="Page 7">7</button>
        <button class="chi-button -flat" aria-label="Page 8">8</button>
        <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light" aria-label="Page 1">1</button>
        <div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat -light" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light" aria-label="Page 5">5</button>
        <button class="chi-button -flat -light -active" aria-label="Page 6">6</button>
        <button class="chi-button -flat -light" aria-label="Page 7">7</button>
        <button class="chi-button -flat -light" aria-label="Page 8">8</button>
        <div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat -light" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Results Label

Add a label to indicate the total number of results.

<!-- For light backgrounds -->
<chi-pagination pages="12" current-page="3" results="240"></chi-pagination>

<!-- For light backgrounds -->
<chi-pagination pages="12" current-page="3" results="240" inverse></chi-pagination>
<!-- For light backgrounds -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start">
      <div class="chi-pagination__results">
        <span class="chi-pagination__label">240 Results</span>
      </div>
    </div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat" aria-label="Page 1">1</button>
        <button class="chi-button -flat" aria-label="Page 2">2</button>
        <button class="chi-button -flat -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat" aria-label="Page 4">4</button>
        <button class="chi-button -flat" aria-label="Page 5">5</button>
        <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start">
      <div class="chi-pagination__results">
        <span class="chi-pagination__label">240 Results</span>
      </div>
    </div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light" aria-label="Page 5">5</button>
        <div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat -light" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Page Size

Allow users to configure the number of result items per page.

<!-- For light backgrounds -->
<chi-pagination pages="12" results="240" current-page="3" page-size></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="12" results="240" current-page="3" page-size inverse></chi-pagination>
<!-- For light backgrounds -->
<!-- HTML -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start">
      <div class="chi-pagination__results">
        <span class="chi-pagination__results-label">240 Results</span>
      </div>
      <div class="chi-pagination__page-size">
        <select class="chi-input" aria-label="Number of result items per page">
          <option value="20">20</option>
          <option value="40">40</option>
          <option value="60">60</option>
          <option value="80">80</option>
          <option value="all">All</option>
        </select>
        <span class="chi-pagination__label">per page</span>
      </div>
    </div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat" aria-label="Page 1">1</button>
        <button class="chi-button -flat" aria-label="Page 2">2</button>
        <button class="chi-button -flat -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat" aria-label="Page 4">4</button>
        <button class="chi-button -flat" aria-label="Page 5">5</button>
        <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<!-- HTML -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start">
      <div class="chi-pagination__results">
        <span class="chi-pagination__results-label">240 Results</span>
      </div>
      <div class="chi-pagination__page-size">
        <select class="chi-input" aria-label="Number of result items per page">
          <option value="20">20</option>
          <option value="40">40</option>
          <option value="60">60</option>
          <option value="80">80</option>
          <option value="all">All</option>
        </select>
        <span class="chi-pagination__label">per page</span>
      </div>
    </div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light" aria-label="Page 5">5</button>
        <div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat -light" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Page Jumper

Add a page jumper to allow users to jump to a specific page of results.

<!-- For light backgrounds -->
<chi-pagination pages="12" results="240" current-page="3" page-size page-jumper></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="12" results="240" current-page="3" page-size page-jumper inverse></chi-pagination>
<!-- For light backgrounds -->
<!-- HTML -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start">
      <div class="chi-pagination__results">
        <span class="chi-pagination__label">240 results</span>
      </div>
      <div class="chi-pagination__page-size">
        <select class="chi-input" aria-label="Number of result items per page">
          <option value="20">20</option>
          <option value="40">40</option>
          <option value="60">60</option>
          <option value="80">80</option>
          <option value="all">All</option>
        </select>
       <span class="chi-pagination__label">per page</span>
      </div>
    </div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat" aria-label="Page 1">1</button>
        <button class="chi-button -flat" aria-label="Page 2">2</button>
        <button class="chi-button -flat -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat" aria-label="Page 4">4</button>
        <button class="chi-button -flat" aria-label="Page 5">5</button>
        <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end">
      <div class="chi-pagination__jumper">
        <label class="chi-pagination__label" for="jumper-input-1">Go to page:</label>
        <input class="chi-input" type="text" id="jumper-input-1">
      </div>
    </div>
  </div>
</nav>

<!-- For dark backgrounds -->
<!-- HTML -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start">
      <div class="chi-pagination__results">
        <span class="chi-pagination__label">240 results</span>
      </div>
      <div class="chi-pagination__page-size">
        <select class="chi-input" aria-label="Number of result items per page">
          <option value="20">20</option>
          <option value="40">40</option>
          <option value="60">60</option>
          <option value="80">80</option>
          <option value="all">All</option>
        </select>
       <span class="chi-pagination__label">per page</span>
      </div>
    </div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light" aria-label="Page 5">5</button>
        <div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
        <button class="chi-button -flat -light" aria-label="Page 12">12</button>
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end">
      <div class="chi-pagination__jumper">
        <label class="chi-pagination__label" for="jumper-input-2">Go to page:</label>
        <input class="chi-input" type="text" id="jumper-input-2">
      </div>
    </div>
  </div>
</nav>

Compact

Base

<!-- For light backgrounds -->
<chi-pagination pages="3" current-page="2" compact></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="3" current-page="2" compact inverse></chi-pagination>
<!-- For light backgrounds -->
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-pagination__label">
        <strong>2</strong>
        <span>of</span>
        <strong>3</strong>
      </div>
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<nav class="chi-pagination -compact -inverse" role="navigation" aria-label="Pagination">
 <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-pagination__label">
        <strong>2</strong>
        <span>of</span>
        <strong>3</strong>
      </div>
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Page Jumper

<!-- For light backgrounds -->
<chi-pagination pages="3" current-page="2" compact page-jumper></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="3" current-page="2" compact page-jumper inverse></chi-pagination>
<!-- For light backgrounds -->
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-pagination__jumper">
        <input type="text" class="chi-input" id="compact-jumper-input-1" aria-label="Page 2" value="2">
        <div class="chi-pagination__label">
          <span>of</span>
          <strong>3</strong>
        </div>
      </div>
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<nav class="chi-pagination -compact -inverse" role="navigation" aria-label="Pagination">
 <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-pagination__jumper">
        <input type="text" class="chi-input" id="compact-jumper-input-2" aria-label="Page 2" value="2">
        <div class="chi-pagination__label">
          <span>of</span>
          <strong>3</strong>
        </div>
      </div>
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

First and Last page buttons

<!-- For light backgrounds -->
<chi-pagination pages="3" current-page="2" compact="compact" page-jumper first-last></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="3" current-page="2" compact page-jumper first-last inverse></chi-pagination>
<!-- For light backgrounds -->
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="First page">
          <div class="chi-button__content">
            <i class="chi-icon icon-page-first" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-pagination__label">
        <strong>2</strong>
        <span>of</span>
        <strong>3</strong>
      </div>
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -icon -flat" aria-label="Last page">
          <div class="chi-button__content">
            <i class="chi-icon icon-page-last" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<nav class="chi-pagination -compact -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="First page">
          <div class="chi-button__content">
            <i class="chi-icon icon-page-first" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-pagination__label">
        <strong>2</strong>
        <span>of</span>
        <strong>3</strong>
      </div>
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -icon -flat -light" aria-label="Last page">
          <div class="chi-button__content">
            <i class="chi-icon icon-page-last" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Additional Sizes

Pagination supports the following sizes: sm, md (default), lg, and xl.

-sm

-md

-lg

-xl

-sm

-md

-lg

-xl

<!-- For light backgrounds -->
<chi-pagination pages="5" current-page="3" size="sm"></chi-pagination>
<chi-pagination pages="5" current-page="3" size="md"></chi-pagination>
<chi-pagination pages="5" current-page="3" size="lg"></chi-pagination>
<chi-pagination pages="5" current-page="3" size="xl"></chi-pagination>

<!-- For dark backgrounds -->
<chi-pagination pages="5" current-page="3" size="sm" inverse></chi-pagination>
<chi-pagination pages="5" current-page="3" size="md" inverse></chi-pagination>
<chi-pagination pages="5" current-page="3" size="lg" inverse></chi-pagination>
<chi-pagination pages="5" current-page="3" size="xl" inverse></chi-pagination>
<!-- For light backgrounds -->
<!-- sm -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -sm" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -sm" aria-label="Page 1">1</button>
        <button class="chi-button -flat -sm" aria-label="Page 2">2</button>
        <button class="chi-button -flat -sm -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -sm" aria-label="Page 4">4</button>
        <button class="chi-button -flat -sm" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -sm" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- md -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat" aria-label="Page 1">1</button>
        <button class="chi-button -flat" aria-label="Page 2">2</button>
        <button class="chi-button -flat -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat" aria-label="Page 4">4</button>
        <button class="chi-button -flat" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- lg -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -lg" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -lg" aria-label="Page 1">1</button>
        <button class="chi-button -flat -lg" aria-label="Page 2">2</button>
        <button class="chi-button -flat -lg -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -lg" aria-label="Page 4">4</button>
        <button class="chi-button -flat -lg" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -lg" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- xl -->
<nav class="chi-pagination" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -xl" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -xl" aria-label="Page 1">1</button>
        <button class="chi-button -flat -xl" aria-label="Page 2">2</button>
        <button class="chi-button -flat -xl -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -xl" aria-label="Page 4">4</button>
        <button class="chi-button -flat -xl" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -xl" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- For dark backgrounds -->
<!-- sm -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light -sm" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light -sm" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light -sm" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -sm -active" aria-label="Page 2">3</button>
        <button class="chi-button -flat -light -sm" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light -sm" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -light -sm" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- md -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -light" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- lg -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light -lg" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light -lg" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light -lg" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -lg -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light -lg" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light -lg" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -light -lg" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

<!-- xl -->
<nav class="chi-pagination -inverse" role="navigation" aria-label="Pagination">
  <div class="chi-pagination__content">
    <div class="chi-pagination__start"></div>
    <div class="chi-pagination__center">
      <div class="chi-pagination__button-group chi-button-group">
        <button class="chi-button -icon -flat -light -xl" aria-label="Previous page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
          </div>
        </button>
        <button class="chi-button -flat -light -xl" aria-label="Page 1">1</button>
        <button class="chi-button -flat -light -xl" aria-label="Page 2">2</button>
        <button class="chi-button -flat -light -xl -active" aria-label="Page 3">3</button>
        <button class="chi-button -flat -light -xl" aria-label="Page 4">4</button>
        <button class="chi-button -flat -light -xl" aria-label="Page 5">5</button>
        <button class="chi-button -icon -flat -light -xl" aria-label="Next page">
          <div class="chi-button__content">
            <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-pagination__end"></div>
  </div>
</nav>

Web Component

Properties

Property
Attribute
Description
Type
Default
ariaLabel
aria-label
To define aria label of pagination
string
'Pagination'
compact
compact
To define compact style of pagination
boolean
false
currentPage
current-page
To define current page of pagination
number
1
firstLast
first-last
To add First page / Last page icon buttons
boolean
false
inverse
inverse
To render inverse styled pagination
boolean
false
pageJumper
page-jumper
To add jump to page text input
boolean
false
pageSize
page-size
To allow use select number of items to show per page
boolean
false
pages
pages
To define number of pages to render
number
undefined
results
results
To show number of result items
number
0
size
size
To define size of pagination elements
string
'md'

Events

Event
Description
Type
chiPageChange
Triggered when the user navigates to another page by clicking pagination item buttons or changing value of Page Jumper input
CustomEvent<string>
chiPageSizeChange
Triggered when the user changes items per page value
CustomEvent<string>

Accessibility

Accessibility guidelines coming soon