Pagination

Storybook Figma

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Preview

<nav aria-label="Pagination" class="d-pagination">
  <button class="base-button__button d-btn d-btn--primary d-btn--icon-only d-pagination__button d-fco50 d-fc-disabled d-bgc-transparent" type="button" disabled="" aria-label="Previous page">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">
      <span class="d-icon__wrapper">
        <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-300" style="display: none;">
          <div
            class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
            style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
          ></div>
        </div>
        <svg>...</svg>
      </span>
    </span>
  </button>
  <div class="">
    <button class="base-button__button d-btn d-btn--primary" type="button">
        <span class="d-btn__label base-button__label">1</span>
    </button>
  </div>
  <div class="">
    <button class="base-button__button d-btn d-btn--muted" type="button">
        <span class="d-btn__label base-button__label">2</span>
    </button>
  </div>
  <div class="">
    <button class="base-button__button d-btn d-btn--muted" type="button">
        <span class="d-btn__label base-button__label">3</span>
    </button>
  </div>
  <div class="">
    <button class="base-button__button d-btn d-btn--muted" type="button">
        <span class="d-btn__label base-button__label">4</span>
    </button>
  </div>
  <div class="d-pagination__separator">
    <div class="d-pagination__separator-icon" >
      <span class="d-icon__wrapper">
        <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-300" style="display: none;">
          <div
            class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
            style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
          ></div>
        </div>
        <svg>...</svg>
      </span>
    </div>
  </div>
  <div class="">
    <button class="base-button__button d-btn d-btn--muted" type="button">
        <span class="d-btn__label base-button__label">25</span>
    </button>
  </div>
  <button class="base-button__button d-btn d-btn--muted d-btn--icon-only d-pagination__button d-fc-tertiary" type="button" aria-label="Next page">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">
      <span class="d-icon__wrapper">
        <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-300" style="display: none;">
          <div
            class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
            style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
          ></div>
        </div>
        <svg>...</svg>
      </span>
    </span>
  </button>
</nav>

Variants

With Active Page

With Max-Visible

Vue API

Props

Name	Description	Default
ariaLabel required	Descriptive label for the pagination content. Type: string
totalPages required	The total number of the pages Type: number
activePage	The active current page in the list of pages, defaults to the first page Type: number	1
hideEdges	Sometimes you may need to hide start and end page number buttons when moving in between. This prop will be used to hide the first and last page buttons when not near the edges. This is useful when your backend does not support offset and you can only use cursor based pagination. Type: boolean	false
maxVisible	Determines the max pages to be shown in the list. Using an odd number is recommended. If an even number is given, then it will be rounded down to the nearest odd number to always keep current page in the middle when current page is in the mid-range. Type: number	5

Events

Name	Description
change	Page change event Type: Number