• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Pagination - Explicit

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/pagination@3.0.0-beta.6

Variants


Standard
Contribution

Show markup
<nav class="spectrum-Pagination spectrum-Pagination--explicit">
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Pagination-prevButton">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></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-Body--secondary spectrum-Pagination-counter">of 89 pages</span>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Pagination-nextButton">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></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.