Pagination

Code Examples

The Pagination component is comprised of a previous link, a next page link, and page number links. Use a Pagination component when you need a way to separate a large portion of content into smaller portions. It serves as navigation and informs users where they currently are and where they can go in the future.

Information

  • As a general guideline, you should use the "default" variant when the pager has three or fewer pages, and you should use the "long" variant when the pager has more than three pages.

Restrictions

  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("pagination-1", "pagination-2", "pagination-3", etc).

Configurable Variables

Variable Default Description
$sprk-pag-current-link-font-weight 500 The font weight of the current pagination link.
$sprk-pag-max-width 26rem The maximum width of the pagination element.
$sprk-pag-link-color $sprk-black The color of the pagination links.
$sprk-pag-link-color-hover $sprk-pag-link-color The color of the pagination links on hover.
$sprk-pag-link-font-weight 400 The font weight of the pagination links.
$sprk-pag-selection-color $sprk-green The accent color for selected pagination links.
$sprk-pag-selection-link-color $sprk-white The text color of the currently selected pagination link.
$sprk-pag-selection-link-color-hover $sprk-white The text color of the currently selected pagination link on hover.
$sprk-pag-circle-size 2em The width and height setting of the circle around the currently selected pagination link.

Class Modifiers

Class Description
.sprk-c-Pagination__link--current Sets styles for the currently selected pagination link.

Default

This is the pattern for when you have three or fewer pages. All three page numbers and prev/next links that appear in the pagination are clickable. The current page number should be bold and have a background color. When the Next link is tapped or clicked the next sequential page is shown and the background color should be removed from the current page number and shown on the next sequential page number. The opposite is true for the Prev link. If the first or last page are selected then the previous or next links should be disabled respectively.

Angular

The Pagination component in spark-core-angular consists of two Angular components:

  • sprk-pagination
  • sprk-unordered-list

The Pagination component expects you to supply data and click handlers as inputs.

React

  • The React Pagination Component is stateless; meaning it is unaware of the data that it is paging over. The component is initialized with metadata and calls a callback function whenever the page changes.
  • The React Pagination component will automatically switch between the "default" and "long" variants as needed.
<nav
 aria-label="Pagination Navigation"
 data-sprk-pagination="default"
 data-id="pagination-1"
>
  <ul class="sprk-c-Pagination sprk-o-HorizontalList sprk-o-HorizontalList--spacing-medium">
    <li>
      <a
       class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--disabled sprk-b-Link--plain"
       href="#"
       data-sprk-pagination="prev"
      >
        <span class="sprk-u-ScreenReaderText">Prev</span>
        <svg
         class="sprk-c-Icon sprk-c-Icon--stroke-current-color"
         viewBox="0 0 64 64"
        >
          <use xlink:href="#chevron-left"></use>
          </svg>
          </a>
    </li>

    <li>
      <a
       class="sprk-c-Pagination__link sprk-c-Pagination__link--current sprk-b-Link"
       href="#"
       data-sprk-pagination="item"
       aria-current="true"
      >
        1
        </a>
    </li>

    <li>
      <a
       class="sprk-c-Pagination__link sprk-b-Link"
       href="#"
       data-sprk-pagination="item"
      >
        2
        </a>
    </li>

    <li>
      <a
       class="sprk-c-Pagination__link sprk-b-Link"
       href="#"
       data-sprk-pagination="item"
      >
        3
        </a>
    </li>

    <li>
      <a
       class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain"
       href="#"
       data-sprk-pagination="next"
      >
        <span class="sprk-u-ScreenReaderText">Next</span>
        <svg
         class="sprk-c-Icon sprk-c-Icon--stroke-current-color"
         viewBox="0 0 64 64"
        >
          <use xlink:href="#chevron-right"></use>
          </svg>
          </a>
    </li>
  </ul>
  </nav>
          
<sprk-pagination
 paginationType="default"
 [currentPage]="1"
 nextLinkText="Next"
 prevLinkText="Prev"
 [totalItems]="3"
 [itemsPerPage]="1"
 (previousClick)="yourGoBackFunction($event)"
 (pageClick)="yourGoToPageFunction($event)"
 (nextClick)="yourGoForwardFunction($event)"
 idString="pagination-1"
>
  </sprk-pagination>
<SprkPagination
 totalItems={30}
 itemsPerPage={10}
 currentPage={1}
 onChangeCallback={(args)=
> { console.log(args); }} idString="pagination-1" />

Information

See below for available customization options:

Input Type Description
paginationType string The type of the pagination you would like. Can be 'default', 'pager', or 'long'.
nextLinkText string The value supplied will be used as the text of the next link.
prevLinkText string The value supplied will be used as the text of the previous link.
totalItems number This is the total number of items in the data to be used for pagination.
itemsPerPage number This is the total number of items to render per page.
analyticsStringFirstLink string The value supplied will be assigned to the 'data-analytics' attribute on the first link. Intended for an outside library to capture data.
analyticsStringSecondLink string The value supplied will be assigned to the 'data-analytics' attribute on the second link. Intended for an outside library to capture data.
analyticsStringThirdLink string The value supplied will be assigned to the 'data-analytics' attribute on the third link. Intended for an outside library to capture data.
analyticsStringLinkNext string The value supplied will be assigned to the 'data-analytics' attribute on the next link. Intended for an outside library to capture data.
analyticsStringLinkPrev string The value supplied will be assigned to the 'data-analytics' attribute on the previous link. Intended for an outside library to capture data.
additionalClasses string Allows a string of classes to add, in addition to the Spark classes. Intended for overrides.
previousClick function Supply a function to the previousClick input to run when the previous link is clicked. On click, previousClick will emit the click event and current page.
nextClick function Supply a function to the nextClick input to run when the next link is clicked. On click, nextClick will emit the click event and current page.
pageClick function Supply a function to the pageClick input to run when the individual page links are clicked. On click, pageClick will emit the click event and current page.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

Information

See below for React properties.

Property Type Description
variant string The variant to use. Can be set to default or pager. If left blank or set to default, the component will render in the default variant or long variant as needed.
totalItems number Required. This is the total number of items in the dataset covered by the pagination component.
itemsPerPage string Required. This is the number of items on each page.
currentPage number This is the current page for the pagination component. If blank, this defaults to the first page.
onChangeCallback function Required. This function will be called every time the component updates. The function should accept a single object parameter with a property called newPage containing the current page number of the pagination component.
{ newPage: 3 }
additionalClasses string Any additional classes to apply to the component. If provided, these classes will be applied to the <ul> element in the component (NOT the <nav> component).
nextLinkText string Screenreader text for the "next page" arrow. Defaults to "Next Page".
nextIcon string Icon name for the "next page" arrow. Defaults to "chevron-right".
prevLinkText string Screenreader text for the "previous page" arrow. Defaults to "Previous Page".
prevIcon string Icon name for the "previous page" arrow. Defaults to "chevron-left".
analyticsStringPage string The value supplied will be assigned to the data-analytics attribute on the individual page links.
analyticsStringNext string The value supplied will be assigned to the data-analytics attribute on the "next page" arrow.
analyticsStringPrev string The value supplied will be assigned to the data-analytics attribute on the "previous page" arrow.
idString string The value supplied will be assigned to the data-id attribute on the component. This will be applied to the <nav> element in the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

Long Pagination

This pattern is for when you have more than three pages of content. When the next or previous links are tapped or clicked the page number decreases or increases respectively. When the user is on the first page the previous link should be disabled. When the user is on the last page the next link should be disabled. The current page should always be bold and highlighted by a background color.

Angular

The Long Pagination variant uses the same inputs as the default version except the paginationType should be set to 'long'.

React

The React version of this component is enabled by using the "default" variant with a configuration requiring more than 3 pages. This is based on the "totalItems" and "itemsPerPage" properties.
<nav
 aria-label="Pagination Navigation"
 data-sprk-pagination="long"
 data-id="pagination-2"
>
  <ul class="sprk-c-Pagination sprk-o-HorizontalList sprk-o-HorizontalList--spacing-small">
    <li>
      <a
       class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain"
       href="#"
       data-sprk-pagination="prev"
      >
        <span class="sprk-u-ScreenReaderText">Prev</span>
        <svg
         class="sprk-c-Icon sprk-c-Icon--stroke-current-color"
         viewBox="0 0 64 64"
        >
          <use xlink:href="#chevron-left"></use>
          </svg>
          </a>
    </li>

    <li>
      <a
       class="sprk-c-Pagination__link sprk-b-Link"
       href="#"
       data-sprk-pagination="item"
      >
        1
        </a>
    </li>

    <li
     class="sprk-u-pas"
     data-sprk-pagination="dots"
    >
      ...
      </li>

      <li>
        <a
         class="sprk-c-Pagination__link sprk-c-Pagination__link--current sprk-b-Link"
         href="#"
         aria-current="true"
         data-sprk-pagination="item"
        >
          11
          </a>
      </li>

      <li
       class="sprk-u-pas"
       data-sprk-pagination="dots"
      >
        ...
        </li>

        <li>
          <a
           class="sprk-c-Pagination__link sprk-b-Link"
           href="#"
           data-sprk-pagination="item"
          >
            22
            </a>
        </li>

        <li>
          <a
           class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain"
           href="#"
           data-sprk-pagination="next"
          >
            <svg
             class="sprk-c-Icon sprk-c-Icon--stroke-current-color"
             viewBox="0 0 64 64"
            >
              <use xlink:href="#chevron-right"></use>
              </svg>
              </a>
        </li>
  </ul>
  </nav>
          
<sprk-pagination
 additionalClasses="sprk-u-mbl"
 paginationType="long"
 nextLinkText="Next"
 prevLinkText="Prev"
 [currentPage]="1"
 [totalItems]="100"
 [itemsPerPage]="25"
 (previousClick)="yourGoBackFunction($event)"
 (pageClick)="yourGoToPageFunction($event)"
 (nextClick)="yourGoForwardFunction($event)"
 idString="pagination-2"
>
  </sprk-pagination>
<SprkPagination
 totalItems={300}
 itemsPerPage={10}
 currentPage={1}
 onChangeCallback={(args)=
> { console.log(args); }} idString="pagination-2" />

Pager

Use this pattern in the case where you need pagination but there is no need to show page numbers.

Angular

The Pager Pagination variant uses the same inputs as the default version except the paginationType should be set to 'pager'.

React

This variant is enabled on the React component by setting the "variant" property to "pager".
<nav
 aria-label="Pagination Navigation"
 data-id="pagination-3"
>
  <ul class="sprk-c-Pagination sprk-o-HorizontalList sprk-o-HorizontalList--spacing-large">
    <li>
      <a
       class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain"
       href=""
      >
        <svg
         class="sprk-c-Icon sprk-c-Icon--stroke-current-color"
         viewBox="0 0 64 64"
        >
          <use xlink:href="#chevron-left"></use>
          </svg>
          <span class="sprk-u-ScreenReaderText">Prev</span>
          </a>
    </li>

    <li>
      <a
       class="sprk-c-Pagination__icon sprk-b-Link sprk-b-Link--plain"
       href=""
      >
        <svg
         class="sprk-c-Icon sprk-c-Icon--stroke-current-color"
         viewBox="0 0 64 64"
        >
          <use xlink:href="#chevron-right"></use>
          </svg>
          <span class="sprk-u-ScreenReaderText">Next</span>
          </a>
    </li>
  </ul>
  </nav>
          
<sprk-pagination
 paginationType="pager"
 nextLinkText="Next"
 prevLinkText="Prev"
 [currentPage]="1"
 [totalItems]="40"
 [itemsPerPage]="10"
 (previousClick)="yourGoBack($event)"
 (pageClick)="yourGoToPage($event)"
 (nextClick)="yourGoForward($event)"
 idString="pagination-3"
>
  </sprk-pagination>
<SprkPagination
 variant="pager"
 totalItems={30}
 itemsPerPage={10}
 currentPage={1}
 onChangeCallback={(args)=
> { console.log(args); }} idString="pagination-3" />