- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Pagination - explicit
Component status | Contribution |
---|---|
Last released | December 4, 2023 |
Current version | @spectrum-css/pagination@7.0.4 |
Variants
StandardContribution
Show markup
<nav class="spectrum-Pagination spectrum-Pagination--explicit">
<a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-prevButton">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
<use xlink:href="#spectrum-css-icon-Chevron100"></use>
</svg>
</a>
<div class="spectrum-Textfield spectrum-Pagination-textfield">
<input type="text" name="field" value="2" class="spectrum-Textfield-input">
</div>
<span class="spectrum-Pagination-counter">of 89 pages</span>
<a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-nextButton">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
<use xlink:href="#spectrum-css-icon-Chevron100"></use>
</svg>
</a>
</nav>
Migration Guide
New Textfield markup
Pagination(Explicit) now uses the new Textfield markup. See the Textfield migration guide for more information. You must add .spectrum-Pagination-textfield
modifier to the outer element div.spectrum-Textfield
.