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

Cycle button

Deprecated component

This component has been deprecated.

Use the quiet variant of action button with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation.

Component status
Deprecated
Last published@spectrum-css/cyclebutton@3.1.3
ReleasedFebruary 16, 2024
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Show markup
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-CycleButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-CycleButton-item is-selected" focusable="false" aria-hidden="true" aria-label="Play">
    <use xlink:href="#spectrum-icon-18-Play" />
  </svg>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-CycleButton-item" focusable="false" aria-hidden="true" aria-label="Pause">
    <use xlink:href="#spectrum-icon-18-Pause" />
  </svg>
</button>