- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Pagination - Page
Component status | Contribution |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/pagination@6.0.22 |
Variants
StandardContribution
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>