• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Pagination - explicit

Component status
Contribution
Current version@spectrum-css/pagination@8.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/pagination@9.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Show markup
<nav class="spectrum-Pagination spectrum-Pagination--explicit">
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-prevButton">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-Chevron100"></use>
    </svg>
  </a>
  <div class="spectrum-Textfield spectrum-Pagination-textfield">
    <input type="text" name="field" value="2" class="spectrum-Textfield-input">
  </div>
  <span class="spectrum-Pagination-counter">of 89 pages</span>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-nextButton">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-Chevron100"></use>
    </svg>
  </a>
</nav>

Migration Guide

New Textfield markup

Pagination(Explicit) now uses the new Textfield markup. See the Textfield migration guide for more information. You must add .spectrum-Pagination-textfield modifier to the outer element div.spectrum-Textfield.