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

Pagination - Page

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--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>