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

Coach indicator

Component status
Contribution
Current version@spectrum-css/coachindicator@2.1.4
ReleasedSeptember 13, 2024
Alpha@spectrum-css/coachindicator@1.0.0-alpha.3
ReleasedNovember 1, 2023
S2-foundations@spectrum-css/coachindicator@3.0.0-s2-foundations.14
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Show markup
<div class="spectrum-CoachIndicator">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

<div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

<div class="spectrum-CoachIndicator spectrum-CoachIndicator--light">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

Quiet
Contribution

Show markup
<div class="spectrum-CoachIndicator spectrum-CoachIndicator--quiet">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

<div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark spectrum-CoachIndicator--quiet">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

<div class="spectrum-CoachIndicator spectrum-CoachIndicator--light spectrum-CoachIndicator--quiet">
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
  <div class="spectrum-CoachIndicator-ring"></div>
</div>

Migration Guide

  • Coach Indicator is now a seperate component from Coach Mark