Pagination

The pagination component is used to display a list of page numbers for your users, so that they can navigate to the next or previous page.

Example

With texts and arrows

HTML React Web Component
<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i>Previous</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">...</a></li>
      <li class="page-item"><a class="page-link" href="#">12</a></li>
      <li class="page-item"><a class="page-link" href="#">Next<i class="bi bi-chevron-right"></i></a></li>
    </ul>
  </nav>
View on React storybook View on Web component storybook

With texts only

HTML React Web Component
<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">...</a></li>
      <li class="page-item"><a class="page-link" href="#">12</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
View on React storybook View on Web component storybook

With arrows only

HTML React Web Component
<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">...</a></li>
      <li class="page-item"><a class="page-link" href="#">12</a></li>
      <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-right"></i></a></li>
    </ul>
  </nav>
View on React storybook View on Web component storybook

Anatomy

Pagination Anatomy
  1. Previous and next buttons: Allows users to go backward or forward a page, can be text or icon, can be used individually depending on situation and space constraints.
  2. Numbering: Allow users to skip to different pages anytime.
  3. Truncation: When a threshold of pages is reached, the list is truncated using an ellipsis.

Spacing

Pagination Spacing

Within the pagination
Ensure that there is a min of 8px vertical spacing and 16px horizontal spacing. Base height 48px.

Usage guidelines

Pagination should be used when:

  1. Long content can be separated into multiple pages that can be navigated sequentially or by selecting a specific page within the pagination set.

Pagination should not be used when:

  1. The page has infinite scrolling, i.e. loading data as the user scrolls down the page.
  2. The content is not part of the same set, consider using navigation instead.
  3. Switching between slides or content in a carousel.

Usability guidelines

Show the total number of pages in the pagination set whenever possible
Users should know the total number of pages or items. Truncation can be used when the number of pages exceeds the pagination display limit.

Highlight the current page
Pagination should highlight the page the user is currently on.

Place pagination at the bottom of the set of results
Do place pagination at the bottom of page so that users are able to navigate between pages.

Pagination design tokens

$pagination-padding-y: 0.5rem !default;
$pagination-padding-x: 1rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-radius: $border-radius !default;
$pagination-margin-start: -$pagination-border-width !default;
$pagination-border-color: $border-color !default;
$pagination-focus-color: $link-hover-color !default;
$pagination-focus-bg: $gray-200 !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $border-color !default;
$pagination-transition: color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out,
box-shadow .15s ease-in-out !default;
$pagination-border-radius-sm: $border-radius-sm !default;
$pagination-border-radius-lg: $border-radius-lg !default;

Last updated 22 November 2023
Home


Latest version 2.2.0