Pagination

The Pagination component provides a reusable pattern for pagination in the interface.

Pagination

Basic pagination with 15 pages, demonstrating overflow ellipsis indicators when the list exceeds five visible items.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="6aa5394956504" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button" data-uid=
      "6aa5394956585" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="/components/pagination?pagination=1" target="_top"
          aria-label="1" data-uid="6aa53949566e8" data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-uid=
          "6aa5394956720" data-component="button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=3" target="_top" aria-label="3" data-uid=
          "6aa5394956751" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-uid=
          "6aa5394956788" data-component="button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-uid=
          "6aa53949567b5" data-component="button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item u-display--none@xs">
      <!-- icon.blade.php -->
    </li>
    <li class="c-pagination__item u-display--none@xs">
      <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" aria-label="15" href="/components/pagination?pagination=15" target="_top" data-uid="6aa539495683a"
      data-component="button"><span class="c-button__label"><span class="c-button__label-text">15</span></span></a>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-uid="6aa539495686f" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
        ['href' => '/components/pagination?pagination=6', 'label' => 'Page 6'],
        ['href' => '/components/pagination?pagination=7', 'label' => 'Page 7'],
        ['href' => '/components/pagination?pagination=8', 'label' => 'Page 8'],
        ['href' => '/components/pagination?pagination=9', 'label' => 'Page 9'],
        ['href' => '/components/pagination?pagination=10', 'label' => 'Page 10'],
        ['href' => '/components/pagination?pagination=11', 'label' => 'Page 11'],
        ['href' => '/components/pagination?pagination=12', 'label' => 'Page 12'],
        ['href' => '/components/pagination?pagination=13', 'label' => 'Page 13'],
        ['href' => '/components/pagination?pagination=14', 'label' => 'Page 14'],
        ['href' => '/components/pagination?pagination=15', 'label' => 'Page 15'],
    ],
    'current' => isset($_GET['pagination']) ? $_GET['pagination'] : 1
])
@endpagination

Using JS

With just a few added attributes you can have pagination made for you, including keepDOM, pagesToShow, and randomizeOrder options.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Sort by

Item 8

Item 9

Item 3

Item 4

Item 5

Item 1

Item 2

Item 6

Item 7

<div class="c-card u-margin__bottom--8 c-card--ratio-16-9" data-js-pagination-target="" data-uid="6aa5394956dc7" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-uid="6aa53949569e7" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h2 class="c-typography c-typography__variant--h2" data-uid="6aa539495693d" data-component="typography">
        Simple pagination
      </h2><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--p" data-uid="6aa5394956992" data-component="typography">
        Showing all pages in the pagination at the same time.
      </p>
    </div>
    <div class="c-card__body" data-uid="6aa5394956d23" data-component="card__body">
      <!-- collection.blade.php -->
      <div class="c-collection" data-js-pagination-container="" data-uid="6aa5394956b90" data-component="collection">
        <!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956a43" data-component="collection__item">
          <div class="c-collection__content">
            Item 1
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956a71" data-component="collection__item">
          <div class="c-collection__content">
            Item 2
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956a95" data-component="collection__item">
          <div class="c-collection__content">
            Item 3
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956ab5" data-component="collection__item">
          <div class="c-collection__content">
            Item 4
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956ad3" data-component="collection__item">
          <div class="c-collection__content">
            Item 5
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956aef" data-component="collection__item">
          <div class="c-collection__content">
            Item 6
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956b0c" data-component="collection__item">
          <div class="c-collection__content">
            Item 7
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956b27" data-component="collection__item">
          <div class="c-collection__content">
            Item 8
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394956b43" data-component="collection__item">
          <div class="c-collection__content">
            Item 9
          </div>
        </div>
      </div><!-- pagination.blade.php -->
      <nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="1" data-js-pagination-per-page="1" data-js-pagination-max-pages="0"
      data-js-pagination-pages-to-show="0" data-js-pagination-keep-dom="1" data-uid="6aa5394956bc2" data-component="pagination">
        <ul class="c-pagination__list">
          <li class="c-pagination__item--previous c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
            data-uid="6aa5394956bf5" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
          <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links="">
              <li class="c-pagination__item" data-js-pagination-index="1">
                <button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" type="button" aria-label="1" data-uid="6aa5394956c6a"
                data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></button>
              </li>
            </ul>
          </li>
          <li class="c-pagination__item--next c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button"
            data-uid="6aa5394956c9d" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div><!-- card.blade.php -->
<div class="c-card u-margin__bottom--8 c-card--ratio-16-9" data-js-pagination-target="" data-async-pagination-example="true" data-uid="6aa5394956ffc" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-uid="6aa5394956e50" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h3 class="c-typography c-typography__variant--h3" data-uid="6aa5394956e08" data-component="typography">
        Async rendered pagination items
      </h3><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--p" data-uid="6aa5394956e2d" data-component="typography">
        Items are injected into the pagination container after initialization using script.
      </p>
    </div>
    <div class="c-card__body" data-uid="6aa5394956fc7" data-component="card__body">
      <!-- collection.blade.php -->
      <div class="c-collection" data-js-pagination-container="" data-uid="6aa5394956e75" data-component="collection"></div><!-- pagination.blade.php -->
      <nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="1" data-js-pagination-per-page="2" data-js-pagination-max-pages="0"
      data-js-pagination-pages-to-show="4" data-js-pagination-async="1" data-js-pagination-keep-dom="1" data-uid="6aa5394956e9e" data-component="pagination">
        <ul class="c-pagination__list">
          <li class="c-pagination__item--previous c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
            data-uid="6aa5394956ece" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
          <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links="">
              <li class="c-pagination__item" data-js-pagination-index="1">
                <button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" type="button" aria-label="1" data-uid="6aa5394956f3b"
                data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></button>
              </li>
            </ul>
          </li>
          <li class="c-pagination__item--next c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button"
            data-uid="6aa5394956f6d" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>
<script>
<![CDATA[
    document.addEventListener('DOMContentLoaded', () => {
        const asyncExample = document.querySelector('[data-async-pagination-example="true"]');
        if (!(asyncExample instanceof HTMLElement)) {
            return;
        }

        const listContainer = asyncExample.querySelector('[data-js-pagination-container]');
        if (!(listContainer instanceof HTMLElement)) {
            return;
        }

        const createItem = (number) => {
            const item = document.createElement('div');
            item.setAttribute('data-js-pagination-item', '');
            item.setAttribute('data-js-pagination-item-title', String(number));
            item.textContent = `Async item ${number}`;

            return item;
        };

        const delay = (milliseconds) => new Promise((resolve) => {
            setTimeout(resolve, milliseconds);
        });

        const renderAsyncItems = async () => {
            await delay(4000);

            [1, 2, 3, 4].forEach((number) => {
                listContainer.appendChild(createItem(number));
            });

            await delay(600);

            [5, 6, 7, 8].forEach((number) => {
                listContainer.appendChild(createItem(number));
            });
        };

        renderAsyncItems();
    }, { once: true });
]]>
</script> <!-- card.blade.php -->
<div class="c-card u-margin__bottom--8 c-card--ratio-16-9" data-js-pagination-target="" data-uid="6aa5394957320" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-uid="6aa539495706e" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h4 class="c-typography c-typography__variant--h4" data-uid="6aa539495702b" data-component="typography">
        Pagination with pagesToShow attribute.
      </h4><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--p" data-uid="6aa539495704f" data-component="typography">
        Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
      </p>
    </div>
    <div class="c-card__body" data-uid="6aa53949572eb" data-component="card__body">
      <!-- collection.blade.php -->
      <div class="c-collection" data-js-pagination-container="" data-uid="6aa53949571a8" data-component="collection">
        <!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394957090" data-component="collection__item">
          <div class="c-collection__content">
            Item 1
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa53949570b3" data-component="collection__item">
          <div class="c-collection__content">
            Item 2
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa53949570d2" data-component="collection__item">
          <div class="c-collection__content">
            Item 3
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa53949570f0" data-component="collection__item">
          <div class="c-collection__content">
            Item 4
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa539495710c" data-component="collection__item">
          <div class="c-collection__content">
            Item 5
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394957130" data-component="collection__item">
          <div class="c-collection__content">
            Item 6
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa539495714f" data-component="collection__item">
          <div class="c-collection__content">
            Item 7
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa539495716c" data-component="collection__item">
          <div class="c-collection__content">
            Item 8
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-uid="6aa5394957188" data-component="collection__item">
          <div class="c-collection__content">
            Item 9
          </div>
        </div>
      </div><!-- pagination.blade.php -->
      <nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="1" data-js-pagination-per-page="1" data-js-pagination-max-pages="0"
      data-js-pagination-pages-to-show="4" data-js-pagination-keep-dom="1" data-uid="6aa53949571cd" data-component="pagination">
        <ul class="c-pagination__list">
          <li class="c-pagination__item--previous c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
            data-uid="6aa53949571fb" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
          <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links="">
              <li class="c-pagination__item" data-js-pagination-index="1">
                <button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" type="button" aria-label="1" data-uid="6aa5394957261"
                data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></button>
              </li>
            </ul>
          </li>
          <li class="c-pagination__item--next c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button"
            data-uid="6aa5394957293" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div><!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-js-pagination-target="" data-uid="6aa53949579a1" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-uid="6aa539495738f" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h4 class="c-typography c-typography__variant--h4" data-uid="6aa539495734f" data-component="typography">
        Pagination with pagesToShow attribute.
      </h4><!-- typography.blade.php   original: p -->
      <p class="c-typography c-typography__variant--p" data-uid="6aa5394957370" data-component="typography">
        Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
      </p>
    </div>
    <div class="c-card__body" data-uid="6aa5394957965" data-component="card__body">
      <div class="c-field c-select u-margin__bottom--4 c-select--sm c-select--singleselect is-required" data-js-pagination-sort="" id="id_6aa53949573dd" data-js-toggle-item=
      "6aa53949573dd-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true"
      data-js-select-type="single" data-uid="6aa53949573f4" data-component="select">
        <label class="c-field__label" for="select_6aa53949573dd">Sort by <span class="u-color__text--danger" aria-hidden="true">*</span></label>
        <div class="c-select__field-container">
          <select id="select_6aa53949573dd" data-js-select-element="1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element"
          tabindex="-1">
            <option class="c-select__select-option" value="">
            </option>
            <option class="c-select__select-option" value="default">
              Default order
            </option>
            <option class="c-select__select-option" value="alphabetical">
              Alphabetical
            </option>
            <option class="c-select__select-option" value="random" selected="selected">
              Random
            </option>
          </select>
          <div class="c-select_focus-styler u-level-top"></div>
          <div class="c-select__expand-button" role="button">
            <!-- icon.blade.php -->
             <!-- icon.blade.php -->
          </div>
          <div class="c-field__inner">
            <div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay="" data-js-toggle-trigger="6aa53949573dd-open-dropdown" data-js-placeholder=""></div>
          </div>
        </div><!-- Visual dropdown list -->
        <div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
          <ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
            <li class="c-select__option" data-js-dropdown-option="default" role="option" aria-selected="false" tabindex="0">
              <!-- icon.blade.php -->
               <!-- icon.blade.php -->
               <span class="c-select__option-label">Default order</span>
            </li>
            <li class="c-select__option" data-js-dropdown-option="alphabetical" role="option" aria-selected="false" tabindex="0">
              <!-- icon.blade.php -->
               <!-- icon.blade.php -->
               <span class="c-select__option-label">Alphabetical</span>
            </li>
            <li class="c-select__option is-selected" data-js-dropdown-option="random" role="option" aria-selected="true" tabindex="0">
              <!-- icon.blade.php -->
               <!-- icon.blade.php -->
               <span class="c-select__option-label">Random</span>
            </li>
          </ul>
        </div>
        <div class="c-select__select-invalid-message" id="error_input_6aa53949573dd_message">
          <!-- icon.blade.php -->
        </div>
        <template>
          <ul>
            <li class="c-select__option" data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
              <!-- icon.blade.php -->
               <!-- icon.blade.php -->
               <span class="c-select__option-label">{OPTION_NAME}</span>
            </li>
          </ul>
        </template>
      </div><!-- collection.blade.php -->
      <div class="c-collection" data-js-pagination-container="" data-uid="6aa539495780f" data-component="collection">
        <!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="8" data-uid="6aa53949576fb" data-component="collection__item">
          <div class="c-collection__content">
            Item 8
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="9" data-uid="6aa5394957720" data-component="collection__item">
          <div class="c-collection__content">
            Item 9
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="3" data-uid="6aa5394957740" data-component="collection__item">
          <div class="c-collection__content">
            Item 3
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="4" data-uid="6aa539495775f" data-component="collection__item">
          <div class="c-collection__content">
            Item 4
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="5" data-uid="6aa539495777d" data-component="collection__item">
          <div class="c-collection__content">
            Item 5
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="1" data-uid="6aa539495779a" data-component="collection__item">
          <div class="c-collection__content">
            Item 1
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="2" data-uid="6aa53949577b7" data-component="collection__item">
          <div class="c-collection__content">
            Item 2
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="6" data-uid="6aa53949577d3" data-component="collection__item">
          <div class="c-collection__content">
            Item 6
          </div>
        </div><!-- collection__item.blade.php -->
        <div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="7" data-uid="6aa53949577f0" data-component="collection__item">
          <div class="c-collection__content">
            Item 7
          </div>
        </div>
      </div><!-- pagination.blade.php -->
      <nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="1" data-js-pagination-per-page="1" data-js-pagination-max-pages="0"
      data-js-pagination-pages-to-show="4" data-js-pagination-keep-dom="1" data-uid="6aa5394957836" data-component="pagination">
        <ul class="c-pagination__list">
          <li class="c-pagination__item--previous c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button"
            data-uid="6aa5394957864" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
          <li class="c-pagination__page-wrapper">
            <ul class="c-pagination__pages" js-table-pagination--links="">
              <li class="c-pagination__item" data-js-pagination-index="1">
                <button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" type="button" aria-label="1" data-uid="6aa53949578ca"
                data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></button>
              </li>
            </ul>
          </li>
          <li class="c-pagination__item--next c-pagination__item">
            <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button"
            data-uid="6aa5394957909" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>


@card([
    'attributeList' => [
        'data-js-pagination-target' => ''
    ],
    'classList' => ['u-margin__bottom--8']
])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Simple pagination
        @endtypography
        @typography([
        ])
            Showing all pages in the pagination at the same time.
        @endtypography
    @endcard__header
    @card__body()
        @collection(['attributeList' => ['data-js-pagination-container' => '']])
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 1
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 2
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 3
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 4
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 5
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 6
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 7
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 8
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 9
            @endcollection__item
        @endcollection

        @pagination([
            'current' => 1,
            'useJS' => true,
            'perPage' => 1,
            'keepDOM' => true,
        ])
        @endpagination
    @endcard__body
@endcard

@card([
    'attributeList' => [
        'data-js-pagination-target' => '',
        'data-async-pagination-example' => 'true'
    ],
    'classList' => ['u-margin__bottom--8']
])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Async rendered pagination items
        @endtypography
        @typography([])
            Items are injected into the pagination container after initialization using script.
        @endtypography
    @endcard__header
    @card__body()
        @collection([
            'attributeList' => [
                'data-js-pagination-container' => ''
            ]
        ])
        @endcollection

        @pagination([
            'current' => 1,
            'useJS' => true,
            'perPage' => 2,
            'pagesToShow' => 4,
            'keepDOM' => true,
            'async' => true
        ])
        @endpagination
    @endcard__body
@endcard

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const asyncExample = document.querySelector('[data-async-pagination-example="true"]');
        if (!(asyncExample instanceof HTMLElement)) {
            return;
        }

        const listContainer = asyncExample.querySelector('[data-js-pagination-container]');
        if (!(listContainer instanceof HTMLElement)) {
            return;
        }

        const createItem = (number) => {
            const item = document.createElement('div');
            item.setAttribute('data-js-pagination-item', '');
            item.setAttribute('data-js-pagination-item-title', String(number));
            item.textContent = `Async item ${number}`;

            return item;
        };

        const delay = (milliseconds) => new Promise((resolve) => {
            setTimeout(resolve, milliseconds);
        });

        const renderAsyncItems = async () => {
            await delay(4000);

            [1, 2, 3, 4].forEach((number) => {
                listContainer.appendChild(createItem(number));
            });

            await delay(600);

            [5, 6, 7, 8].forEach((number) => {
                listContainer.appendChild(createItem(number));
            });
        };

        renderAsyncItems();
    }, { once: true });
</script>



@card([
    'attributeList' => [
        'data-js-pagination-target' => ''
    ],
    'classList' => [
        'u-margin__bottom--8'
    ]
])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Pagination with pagesToShow attribute.
        @endtypography
        @typography([
        ])
            Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
        @endtypography
    @endcard__header
    @card__body()
        @collection(['attributeList' => ['data-js-pagination-container' => '']])
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 1
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 2
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 3
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 4
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 5
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 6
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 7
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 8
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '']])
                Item 9
            @endcollection__item
        @endcollection

        @pagination([
            'current' => 1,
            'useJS' => true,
            'perPage' => 1,
            'pagesToShow' => 4,
            'keepDOM' => true,
        ])
        @endpagination
    @endcard__body
@endcard

@card([
    'attributeList' => [
        'data-js-pagination-target' => ''
    ]
])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Pagination with pagesToShow attribute.
        @endtypography
        @typography([
        ])
            Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
        @endtypography
    @endcard__header
    @card__body()
        @select([
            'label' => 'Sort by',
            'hidePlaceholder' => true,
            'required' => true,
            'preselected' => 'random',
            'size' => 'sm',
            'limitWidth' => true,
            'options' => [
                'default' => 'Default order',
                'alphabetical' => 'Alphabetical',
                'random' => 'Random',
            ],
            'attributeList' => [
                'data-js-pagination-sort' => '',
            ],
            'classList' => [
                'u-margin__bottom--4',
            ],
        ])
        @endselect

        @collection(['attributeList' => ['data-js-pagination-container' => '']])
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '8']])
                Item 8
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '9']])
                Item 9
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '3']])
                Item 3
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '4']])
                Item 4
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '5']])
                Item 5
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '1']])
                Item 1
            @endcollection__item

            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '2']])
                Item 2
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '6']])
                Item 6
            @endcollection__item
            @collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '7']])
                Item 7
            @endcollection__item
        @endcollection

        @pagination([
            'current' => 1,
            'useJS' => true,
            'perPage' => 1,
            'pagesToShow' => 4,
            'keepDOM' => true,
        ])
        @endpagination
    @endcard__body
@endcard

Small list

Pagination with four pages and a static active page — no overflow or ellipsis indicators are shown when the total fits within the visible window.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="6aa5394957a19" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=1" target="_top" data-uid="6aa5394957a49" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-uid=
          "6aa5394957ab4" data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" href="/components/pagination?pagination=2" target="_top"
          aria-label="2" data-uid="6aa5394957ae6" data-component="button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=3" target="_top" aria-label="3" data-uid=
          "6aa5394957b15" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-uid=
          "6aa5394957b41" data-component="button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=3" target="_top" data-uid="6aa5394957b70" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
    ],
    'current' => 2
])
@endpagination

Button size: medium

Pagination rendered with medium-sized buttons using buttonSize 'md', producing wider page-number buttons than the default small size.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="6aa5394957c0c" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-uid="6aa5394957c39" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--md" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-uid=
          "6aa5394957cb3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--md" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-uid=
          "6aa5394957cf3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--md" href="/components/pagination?pagination=3" target="_top"
          aria-label="3" data-uid="6aa5394957d20" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--md" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-uid=
          "6aa5394957d4b" data-component="button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--md" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-uid=
          "6aa5394957d75" data-component="button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=4" target="_top" data-uid="6aa5394957da2" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
    ],
    'current' => 3,
    'buttonSize' => 'md'
])
@endpagination

Button size: large

Pagination rendered with large-sized buttons using buttonSize 'lg', producing the widest page-number buttons in the available size scale.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="6aa5394957e3a" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--lg c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-uid="6aa5394957e67" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--lg" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-uid=
          "6aa5394957edd" data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--lg" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-uid=
          "6aa5394957f10" data-component="button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--lg" href="/components/pagination?pagination=3" target="_top"
          aria-label="3" data-uid="6aa5394957f4b" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--lg" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-uid=
          "6aa5394957f8b" data-component="button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--lg" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-uid=
          "6aa5394957fb5" data-component="button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__filled c-button__filled--default c-button--lg c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=4" target="_top" data-uid="6aa5394957fe3" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
    ],
    'current' => 3,
    'buttonSize' => 'lg'
])
@endpagination

Button style: outlined

Pagination using outlined button style, giving page buttons a bordered appearance instead of the default filled background.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="6aa539495809c" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__outlined c-button__outlined--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-uid="6aa53949580cf" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__outlined c-button__outlined--default c-button--sm" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-uid=
          "6aa5394958137" data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__outlined c-button__outlined--default c-button--sm" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-uid=
          "6aa5394958167" data-component="button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__outlined c-button__outlined--primary c-button--sm" href="/components/pagination?pagination=3" target="_top"
          aria-label="3" data-uid="6aa5394958194" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__outlined c-button__outlined--default c-button--sm" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-uid=
          "6aa53949581bf" data-component="button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__outlined c-button__outlined--default c-button--sm" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-uid=
          "6aa53949581e9" data-component="button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__outlined c-button__outlined--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=4" target="_top" data-uid="6aa5394958217" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
    ],
    'current' => 3,
    'buttonStyle' => 'outlined'
])
@endpagination

Button style: basic

Pagination using basic button style, rendering page buttons without fill or border for a minimal, text-only appearance.

<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="6aa53949582ae" data-component="pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item--previous c-pagination__item">
      <a class="c-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=2" target="_top" data-uid="6aa53949582da" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
    <li class="c-pagination__page-wrapper">
      <ul class="c-pagination__pages" js-table-pagination--links="">
        <li class="c-pagination__item" data-js-pagination-index="1">
          <a class="c-button c-pagination__link c-button__basic c-button__basic--default c-button--sm" href="/components/pagination?pagination=1" target="_top" aria-label="1" data-uid="6aa539495833e"
          data-component="button"><span class="c-button__label"><span class="c-button__label-text">1</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="2">
          <a class="c-button c-pagination__link c-button__basic c-button__basic--default c-button--sm" href="/components/pagination?pagination=2" target="_top" aria-label="2" data-uid="6aa539495836d"
          data-component="button"><span class="c-button__label"><span class="c-button__label-text">2</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="3">
          <a class="c-button c-pagination__link c-pagination__item--is-active c-button__basic c-button__basic--primary c-button--sm" href="/components/pagination?pagination=3" target="_top"
          aria-label="3" data-uid="6aa5394958399" data-component="button"><span class="c-button__label"><span class="c-button__label-text">3</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="4">
          <a class="c-button c-pagination__link c-button__basic c-button__basic--default c-button--sm" href="/components/pagination?pagination=4" target="_top" aria-label="4" data-uid="6aa53949583c3"
          data-component="button"><span class="c-button__label"><span class="c-button__label-text">4</span></span></a>
        </li>
        <li class="c-pagination__item" data-js-pagination-index="5">
          <a class="c-button c-pagination__link c-button__basic c-button__basic--default c-button--sm" href="/components/pagination?pagination=5" target="_top" aria-label="5" data-uid="6aa53949583ec"
          data-component="button"><span class="c-button__label"><span class="c-button__label-text">5</span></span></a>
        </li>
      </ul>
    </li>
    <li class="c-pagination__item--next c-pagination__item">
      <a class="c-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" disabled="false" data-js-pagination-next="" aria-label="chevron_right" href=
      "?p=components%2Fpagination&amp;%3Fpagination%3D=4" target="_top" data-uid="6aa5394958419" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
      <!-- icon.blade.php -->
       </span></span></a>
    </li>
  </ul>
</nav>

@pagination([
    'list' => [
        ['href' => '/components/pagination?pagination=1', 'label' => 'Page 1'],
        ['href' => '/components/pagination?pagination=2', 'label' => 'Page 2'],
        ['href' => '/components/pagination?pagination=3', 'label' => 'Page 3'],
        ['href' => '/components/pagination?pagination=4', 'label' => 'Page 4'],
        ['href' => '/components/pagination?pagination=5', 'label' => 'Page 5'],
    ],
    'current' => 3,
    'buttonStyle' => 'basic'
])
@endpagination

API

Parameter	Default	Description
list	[]	Array with pages
current	1	current page as index number
currentClass	--is-active	The current classname
componentElement	nav	The tag for the component
listElement	ul	List element tag
listItem	li	List item tag
linkPrefix	?pagination=	Pagination uses a link prefix on prev next buttons before the numeric index, add it here.
anchorTag		Adds the ability to add an anchor tag in the end of every link.
previousDisabled	false	-
nextDisabled	false	-
useJS	false	If the item should use default JS to supply pagination
randomizeOrder	false	When useJS is true, this option randomize the order of the items.
perPage	10	How many items per page
maxPages	false	Maximum amount of pages
buttonStyle	filled	The style of button to display
buttonSize	sm	Size of the buttons
pagesToShow	false	Amount of pages that is shown to the user at one time.
keepDOM	false	When useJS is true, this option keeps the DOM elements in place when paginating.
async	false	When useJS is true, this option will make the pagination async.

CSS API

Variable	Default	Type	Values	Description
--c-pagination--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-pagination--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.

Similar components

Option Icon Section Icon