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

Pagination - button style

Component status
Contribution
Last releasedNovember 9, 2023
Current version@spectrum-css/pagination@7.0.1
View repository
GitHub
View package
npm

Variants

CTA
Contribution

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>

Primary
Contribution

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>

Secondary
Contribution

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>