- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Pagination - button style
Component status | Contribution |
---|---|
Current version | @spectrum-css/pagination@8.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/pagination@9.0.0-s2-foundations.15 |
Released | October 4, 2024 |
Variants
CTAContribution
Show markup
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
<a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-SplitButton-trigger 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>
<a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-SplitButton-action spectrum-Pagination-nextButton">
<span class="spectrum-Button-label">Next</span>
<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>
PrimaryContribution
Show markup
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
<a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-SplitButton-trigger 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>
<a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-SplitButton-action spectrum-Pagination-nextButton">
<span class="spectrum-Button-label">Next</span>
<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>
SecondaryContribution
Show markup
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
<a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-SplitButton-trigger 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>
<a href="#" class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-SplitButton-action spectrum-Pagination-nextButton">
<span class="spectrum-Button-label">Next</span>
<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>