Pagination

Overview

The Pagination component provides navigation buttons and a page selector to help users navigate through large sets of content. Styles can be customised through CSS variables.

Example Usage

Basic Example

The basic Pagination component includes navigation buttons and a page selector.

Preview Code

Copy

Prev

1 2 3

of 3

Next

<nav class="skin-pagination pagination-container" aria-label="Pagination">
  <a
    id="previous-page"
    href="?pageNumber=1"
    class="pagination-button interactive-foreground"
    aria-label="Previous page"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth="2"
      stroke="currentColor"
      class="pointer-events-none h-5 w-5"
      height="25"
      width="25"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.75 19.5L8.25 12l7.5-7.5"
      ></path>
    </svg>
    <span>Prev</span>
  </a>
  <div class="pagination-select-wrapper">
    <select
      id="page-selector"
      name="page-selector"
      class="pagination-select interactive-background interactive-border"
    >
      <option value="1" aria-label="Page 1 of 3">1</option>
      <option value="2" aria-label="Page 2 of 3" selected>2</option>
      <option value="3" aria-label="Page 3 of 3">3</option>
    </select>
    <p aria-hidden="true">of 3</p>
  </div>
  <a
    id="next-page"
    class="pagination-button interactive-foreground"
    href="?pageNumber=3"
    aria-label="Next page"
  >
    <span>Next</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth="2"
      stroke="currentColor"
      class="pointer-events-none h-5 w-5"
      height="25"
      width="25"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.75 19.5L8.25 12l7.5-7.5"
        transform="rotate(180 12 12)"
      ></path>
    </svg>
  </a>
</nav>

<nav class="skin-pagination pagination-container" aria-label="Pagination">
  <a
    id="previous-page"
    href="?pageNumber=1"
    class="pagination-button interactive-foreground"
    aria-label="Previous page"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth="2"
      stroke="currentColor"
      class="pointer-events-none h-5 w-5"
      height="25"
      width="25"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.75 19.5L8.25 12l7.5-7.5"
      ></path>
    </svg>
    <span>Prev</span>
  </a>
  <div class="pagination-select-wrapper">
    <select
      id="page-selector"
      name="page-selector"
      class="pagination-select interactive-background interactive-border"
    >
      <option value="1" aria-label="Page 1 of 3">1</option>
      <option value="2" aria-label="Page 2 of 3" selected>2</option>
      <option value="3" aria-label="Page 3 of 3">3</option>
    </select>
    <p aria-hidden="true">of 3</p>
  </div>
  <a
    id="next-page"
    class="pagination-button interactive-foreground"
    href="?pageNumber=3"
    aria-label="Next page"
  >
    <span>Next</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth="2"
      stroke="currentColor"
      class="pointer-events-none h-5 w-5"
      height="25"
      width="25"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.75 19.5L8.25 12l7.5-7.5"
        transform="rotate(180 12 12)"
      ></path>
    </svg>
  </a>
</nav>

First and Last Page Example

The ‘previous’ and ‘next’ buttons are removed for the first and last pages, respectively, for example:

Preview Code

Copy

Prev

1 2 3

of 3

<nav class="skin-pagination pagination-container" aria-label="Pagination">
    <a
      id="previous-page"
      href="?pageNumber=2"
      class="pagination-button interactive-foreground"
      aria-label="Previous page"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="currentColor"
        class="pointer-events-none h-5 w-5"
        height="25"
        width="25"
        aria-hidden="true"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15.75 19.5L8.25 12l7.5-7.5"
        ></path>
      </svg>
      <span>Prev</span>
    </a>
    <div class="pagination-select-wrapper">
      <select
        id="page-selector"
        name="page-selector"
        class="pagination-select interactive-background interactive-border"
      >
        <option value="1" aria-label="Page 1 of 3">1</option>
        <option value="2" aria-label="Page 2 of 3">2</option>
        <option value="3" aria-label="Page 3 of 3" selected>3</option>
      </select>
      <p aria-hidden="true">of 3</p>
    </div>
  </nav>

<nav class="skin-pagination pagination-container" aria-label="Pagination">
    <a
      id="previous-page"
      href="?pageNumber=2"
      class="pagination-button interactive-foreground"
      aria-label="Previous page"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="currentColor"
        class="pointer-events-none h-5 w-5"
        height="25"
        width="25"
        aria-hidden="true"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15.75 19.5L8.25 12l7.5-7.5"
        ></path>
      </svg>
      <span>Prev</span>
    </a>
    <div class="pagination-select-wrapper">
      <select
        id="page-selector"
        name="page-selector"
        class="pagination-select interactive-background interactive-border"
      >
        <option value="1" aria-label="Page 1 of 3">1</option>
        <option value="2" aria-label="Page 2 of 3">2</option>
        <option value="3" aria-label="Page 3 of 3" selected>3</option>
      </select>
      <p aria-hidden="true">of 3</p>
    </div>
  </nav>

CSS Variables

The following CSS variables are available for customizing the Pagination component:

Variable	Default Value	Description
--pagination-select-padding-top	0.5rem	Top padding for the page selector.
--pagination-select-padding-bottom	0.5rem	Bottom padding for the page selector.
--pagination-select-padding-left	0.75rem	Left padding for the page selector.
--pagination-select-padding-right	2rem	Right padding for the page selector.
--pagination-select-border-width	1px	Border width for the page selector.
--pagination-select-border-width-disabled	2px	Border width for the disabled page selector.
--pagination-select-background-size	1rem 1rem	Background size for the dropdown arrow.
--pagination-select-background-position	right 0.5rem center	Background position for the dropdown arrow.
--pagination-select-border-radius	var(--radius-site)	Border radius for the page selector.
--pagination-font-size	var(--text-sm)	Font size for pagination elements.
--pagination-font-weight	var(--font-weight-medium)	Font weight for pagination elements.
--pagination-horizontal-gap	1rem	Horizontal gap between pagination elements.
--pagination-select-svg	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");	Downward chevron

Accessibility

Implemented Accessibility Features

• Includes aria-label attributes for prev/next navigation buttons
• Includes aria-label attributes for options
• Provides visible focus indicators for keyboard navigation
• Use of semantic HTML elements <nav> and <select>
• Tab key navigates between pagination controls
• Arrow keys change values in the select dropdown

Accessibility Considerations when implementing

• ensure that aria-labels are dynamically updated with JavaScript
• remove previous / next page buttons from the DOM when on the first and last page.