Skip to main content

Pagination

Types

Gray

Result
Loading...
Live Editor
<div class="fds-pagination fds-pagination--gray">
  <button class="fds-pagination__btn">
    <span class="fds-icon fds-pagination__icon">
      <i class="fa-regular fa-chevron-left"></i>
    </span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">1</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">2</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">3</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">4</span>
  </button>
  <button class="fds-pagination__btn fds-pagination__btn--selected">
    <span class="fds-pagination__label">5</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">...</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">10</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-icon fds-pagination__icon">
      <i class="fa-regular fa-chevron-right"></i>
    </span>
  </button>
</div>

White

Result
Loading...
Live Editor
<div class="fds-pagination fds-pagination--white">
  <button class="fds-pagination__btn">
    <span class="fds-icon fds-pagination__icon">
      <i class="fa-regular fa-chevron-left"></i>
    </span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">1</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">2</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">3</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">4</span>
  </button>
  <button class="fds-pagination__btn fds-pagination__btn--selected">
    <span class="fds-pagination__label">5</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">...</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">10</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-icon fds-pagination__icon">
      <i class="fa-regular fa-chevron-right"></i>
    </span>
  </button>
</div>

Size

Default

Result
Loading...
Live Editor
<div class="fds-pagination fds-pagination--gray">
  <button class="fds-pagination__btn">
    <span class="fds-icon fds-pagination__icon">
      <i class="fa-regular fa-chevron-left"></i>
    </span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">1</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">2</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">3</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">4</span>
  </button>
  <button class="fds-pagination__btn fds-pagination__btn--selected">
    <span class="fds-pagination__label">5</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">...</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">10</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-icon fds-pagination__icon">
      <i class="fa-regular fa-chevron-right"></i>
    </span>
  </button>
</div>

Small

Result
Loading...
Live Editor
<div class="fds-pagination fds-pagination--gray fds-pagination--sm">
  <button class="fds-pagination__btn">
    <span class="fds-icon fds-pagination__icon">
      <i class="fa-regular fa-chevron-left"></i>
    </span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">1</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">2</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">3</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">4</span>
  </button>
  <button class="fds-pagination__btn fds-pagination__btn--selected">
    <span class="fds-pagination__label">5</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">...</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-pagination__label">10</span>
  </button>
  <button class="fds-pagination__btn">
    <span class="fds-icon fds-pagination__icon">
      <i class="fa-regular fa-chevron-right"></i>
    </span>
  </button>
</div>