Pagination - Page

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

Variants#


Standard#
Contribution

<nav class="spectrum-Pagination spectrum-Pagination--listing">
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Pagination-prevButton"><span class="spectrum-Button-label">Prev</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">1</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected"><span class="spectrum-ActionButton-label">2</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">3</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">4</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">5</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">6</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">...</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">24</span></a>
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Pagination-nextButton"><span class="spectrum-Button-label">Next</span></a>
</nav>
Show markup