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

Pagination - page

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--listing">
  <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-Pagination-prevButton"><span class="spectrum-Button-label">Prev</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">1</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected"><span class="spectrum-ActionButton-label">2</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">3</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">4</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">5</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">6</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">...</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">24</span></a>
  <a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-Pagination-nextButton"><span class="spectrum-Button-label">Next</span></a>
</nav>