Pagination - Button Style

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/pagination@2.0.0

Variants#


CTA#
Contribution

<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>
Show markup

Primary#
Contribution

<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>
Show markup

Secondary#
Contribution

<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>
Show markup