Pagination
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>
<!-- For light backgrounds -->
<ChiPagination :pages="5" :currentPage="3" />
<!-- For dark backgrounds -->
<ChiPagination :pages="5" :currentPage="3" :inverse="true" />
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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat" aria-label="Next page" type="button">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat -light" aria-label="Next page" type="button">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
Disabled
Disabled previous button
Disabled next button
Disabled previous button
Disabled next button
chi-pagination
automatically 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>
ChiPagination
automatically disables previous / next pages if current page is first or last<!-- For light backgrounds -->
<ChiPagination :pages="5" :currentPage="1" />
<ChiPagination :pages="5" :currentPage="5" />
<!-- For dark backgrounds -->
<ChiPagination :pages="5" :currentPage="1" :inverse="true" />
<ChiPagination :pages="5" :currentPage="5" :inverse="true" />
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" type="button" 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" type="button">1</button>
<button class="chi-button -flat" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat" aria-label="Next page" type="button">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light" aria-label="Page 5" type="button">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 -->
<ChiPagination :pages="12" :currentPage="3" />
<!-- For dark backgrounds -->
<ChiPagination :pages="12" :currentPage="3" :inverse="true" />
<!-- 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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat" aria-label="Page 5" type="button">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat" aria-label="Next page" type="button">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light" aria-label="Page 5" type="button">5</button>
<div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat -light" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat -light" aria-label="Next page" type="button">
<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" current-page="6"></chi-pagination>
<!-- For dark backgrounds -->
<chi-pagination pages="12" current-page="6" inverse></chi-pagination>
<!-- For light backgrounds -->
<ChiPagination :pages="12" :currentPage="6" />
<!-- For dark backgrounds -->
<ChiPagination :pages="12" :currentPage="6" :inverse="true" />
<!-- 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" type="button">
<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" type="button">1</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat" aria-label="Page 5" type="button">5</button>
<button class="chi-button -flat -active" aria-label="Page 6" type="button">6</button>
<button class="chi-button -flat" aria-label="Page 7" type="button">7</button>
<button class="chi-button -flat" aria-label="Page 8" type="button">8</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat" aria-label="Next page" type="button">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</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" type="button">
<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" type="button">1</button>
<div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat -light" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light" aria-label="Page 5" type="button">5</button>
<button class="chi-button -flat -light -active" aria-label="Page 6" type="button">6</button>
<button class="chi-button -flat -light" aria-label="Page 7" type="button">7</button>
<button class="chi-button -flat -light" aria-label="Page 8" type="button">8</button>
<div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat -light" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat -light" aria-label="Next page" type="button">
<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 -->
<ChiPagination :pages="12" :currentPage="3" :results="240" />
<!-- For light backgrounds -->
<ChiPagination :pages="12" :currentPage="3" :results="240" :inverse="true" />
<!-- 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 class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page" type="button">
<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" type="button">1</button>
<button class="chi-button -flat" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat" aria-label="Page 5" type="button">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat" aria-label="Next page" type="button">
<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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light" aria-label="Page 5" type="button">5</button>
<div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat -light" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat -light" aria-label="Next page" type="button">
<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 -->
<ChiPagination :pages="12" :results="240" :currentPage="3" :pageSize="true" />
<!-- For dark backgrounds -->
<ChiPagination :pages="12" :results="240" :currentPage="3" :pageSize="true" :inverse="true" />
<!-- 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__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 class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page" type="button">
<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" type="button">1</button>
<button class="chi-button -flat" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat" aria-label="Page 5" type="button">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat" aria-label="Next page" type="button">
<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__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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light" aria-label="Page 5" type="button">5</button>
<div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat -light" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat -light" aria-label="Next page" type="button">
<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 -->
<ChiPagination :pages="12" :results="240" :currentPage="3" :pageSize="true" :pageJumper="true" />
<!-- For dark backgrounds -->
<ChiPagination :pages="12" :results="240" :currentPage="3" :pageSize="true" :pageJumper="true" />
<!-- 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 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 class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Previous page" type="button">
<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" type="button">1</button>
<button class="chi-button -flat" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat" aria-label="Page 5" type="button">5</button>
<div class="chi-button -flat" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat" aria-label="Next page" type="button">
<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 -->
<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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light" aria-label="Page 5" type="button">5</button>
<div class="chi-button -flat -light" aria-hidden="true" disabled>...</div>
<button class="chi-button -flat -light" aria-label="Page 12" type="button">12</button>
<button class="chi-button -icon -flat -light" aria-label="Next page" type="button">
<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 -->
<ChiPagination :pages="3" :currentPage="2" :compact="true" />
<!-- For dark backgrounds -->
<ChiPagination :pages="3" :currentPage="2" :compact="true" :inverse="true" />
<!-- 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 -light" aria-label="Previous page" type="button">
<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" type="button">
<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" type="button">
<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" type="button">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat" aria-label="Next page" type="button">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</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 -->
<ChiPagination :pages="3" :currentPage="2" :compact="true" :pageJumper="true" />
<!-- For dark backgrounds -->
<ChiPagination :pages="3" :currentPage="2" :compact="true" :pageJumper="true" :inverse="true" />
<!-- 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 -light" aria-label="Previous page" type="button">
<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" type="button">
<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 -->
<ChiPagination :pages="3" :currentPage="2" :compact="true" :pageJumper="true" :firstLast="true" />
<!-- For dark backgrounds -->
<ChiPagination :pages="3" :currentPage="2" :compact="true" :pageJumper="true" :firstLast="true" :inverse="true" />
<!-- 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" type="button">
<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" type="button">
<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" type="button">
<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" type="button">
<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="Previous page" type="button">
<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">
<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" type="button">
<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" type="button">
<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: xs
, sm
, md
(default), lg
, and xl
.
-xs
-sm
-md
-lg
-xl
-xs
-sm
-md
-lg
-xl
<!-- For light backgrounds -->
<chi-pagination pages="5" current-page="3" size="xs"></chi-pagination>
<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="xs" inverse></chi-pagination>
<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 -->
<ChiPagination :pages="5" :currentPage="3" size="xs" />
<ChiPagination :pages="5" :currentPage="3" size="sm" />
<ChiPagination :pages="5" :currentPage="3" size="md" />
<ChiPagination :pages="5" :currentPage="3" size="lg" />
<ChiPagination :pages="5" :currentPage="3" size="xl" />
<!-- For dark backgrounds -->
<ChiPagination :pages="5" :currentPage="3" size="xs" :inverse="true" />
<ChiPagination :pages="5" :currentPage="3" size="sm" :inverse="true" />
<ChiPagination :pages="5" :currentPage="3" size="md" :inverse="true" />
<ChiPagination :pages="5" :currentPage="3" size="lg" :inverse="true" />
<ChiPagination :pages="5" :currentPage="3" size="xl" :inverse="true" />
<!-- 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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -sm" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -sm -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -sm" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -sm" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat -sm" aria-label="Next page" type="button">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -xl" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -xl -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -xl" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -xl" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat -xl" aria-label="Next page" type="button">
<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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light -sm" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -sm -active" aria-label="Page 2" type="button">3</button>
<button class="chi-button -flat -light -sm" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light -sm" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat -light -sm" aria-label="Next page" type="button">
<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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat -light" aria-label="Next page" type="button">
<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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light -lg" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -lg -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light -lg" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light -lg" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat -light -lg" aria-label="Next page" type="button">
<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" type="button">
<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" type="button">1</button>
<button class="chi-button -flat -light -xl" aria-label="Page 2" type="button">2</button>
<button class="chi-button -flat -light -xl -active" aria-label="Page 3" type="button">3</button>
<button class="chi-button -flat -light -xl" aria-label="Page 4" type="button">4</button>
<button class="chi-button -flat -light -xl" aria-label="Page 5" type="button">5</button>
<button class="chi-button -icon -flat -light -xl" aria-label="Next page" type="button">
<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>
Compact
Base
<!-- For light backgrounds -->
<chi-pagination pages="3" current-page="2" size="xs" compact first-last></chi-pagination>
<!-- For dark backgrounds -->
<chi-pagination pages="3" current-page="2" size="xs" compact inverse></chi-pagination>
<ChiPagination :pages="3" :currentPage="2" :compact="true" :firstLast="true" size="xs" />
<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 -xs" aria-label="Previous page" type="button">
<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 -xs" aria-label="Next page" type="button">
<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.
<chi-pagination pages="12" current-page="3" results="240" size="xs"></chi-pagination>
<ChiPagination :pages="3" :results="240" :currentPage="2" :compact="true" :firstLast="true" size="xs" />
<nav class="chi-pagination -compact" 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 -xs" aria-label="Previous page" type="button">
<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>3</strong>
<span>of</span>
<strong>12</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -xs" aria-label="Next page" type="button">
<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>