Pagination - Explicit

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/pagination@2.0.0

Variants#


Standard#
Contribution

<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>
  <input type="text" name="field" value="2" class="spectrum-Textfield spectrum-Pagination-input">
  <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>
Show markup