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

Coach mark

Component status
Verified
Last releasedDecember 4, 2023
Current version@spectrum-css/coachmark@6.0.0
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Try playing with a pixel brush
Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
2 of 8
Try playing with a pixel brush

Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
2 of 8
Show markup
<div class="spectrum-Examples-item" style="height: 300px; width: auto;">
  <div class="spectrum-CoachMark">
    <div class="spectrum-Popover is-open">
      <div class="spectrum-CoachMark-header">
        <div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
      </div>
      <div class="spectrum-CoachMark-content">
        Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
      </div>
      <div class="spectrum-CoachMark-footer">
      <div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>
        <div class="spectrum-ButtonGroup spectrum-CoachMark-buttongroup">
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary">
            <span class="spectrum-Button-label">Previous</span>
          </button>

          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>

        <div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-CoachMark-buttongroup--mobile">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Previous">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft75 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75"></use>
            </svg>
          <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="spectrum-Examples-item" style="height: 250px; width: auto;">
  <div class="spectrum-CoachMark">
    <div class="spectrum-Popover is-open">
      <div class="spectrum-CoachMark-header">
        <div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
        <div class="spectrum-CoachMark-action-menu">

          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-CoachMark-menu is-selected">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>

          <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionButton--quiet spectrum-CoachMark-menu--mobile is-selected">
            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>

          <br>
          <div class="spectrum-Popover spectrum-Popover--bottom is-open">
            <ul class="spectrum-Menu" role="menu">
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Skip tour</span>
              </li>
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Reset tour</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="spectrum-CoachMark-content">
        Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
      </div>
      <div class="spectrum-CoachMark-footer">
      <div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>
        <div class="spectrum-ButtonGroup spectrum-CoachMark-buttongroup">
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary">
            <span class="spectrum-Button-label">Previous</span>
          </button>

          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>

        <div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-CoachMark-buttongroup--mobile">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Previous">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft75 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75"></use>
            </svg>
          <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

With Media
Contribution

Try playing with a pixel brush
Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
2 of 8
Try playing with a pixel brush

Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
2 of 8
Show markup
<div class="spectrum-Examples-item" style="height: 500px; width: auto;">
  <div class="spectrum-CoachMark">

    <div class="spectrum-Popover is-open">
      <div class="spectrum-CoachMark-image-wrapper">
        <img class="spectrum-CoachMark-image" src="img/example-card-landscape.jpeg" />
      </div>
      <div class="spectrum-CoachMark-header">
        <div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
      </div>
      <div class="spectrum-CoachMark-content">
        Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
      </div>

      <div class="spectrum-CoachMark-footer">
        <div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>
        <div class="spectrum-ButtonGroup spectrum-CoachMark-buttongroup">
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary">
            <span class="spectrum-Button-label">Previous</span>
          </button>
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>
        <div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-CoachMark-buttongroup--mobile">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Previous">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft75 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75"></use>
            </svg>
          <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="spectrum-Examples-item" style="height: 500px; width: auto;">
  <div class="spectrum-CoachMark">
    <div class="spectrum-Popover is-open">
      <div class="spectrum-CoachMark-image-wrapper">
        <img class="spectrum-CoachMark-image" src="img/example-card-landscape.jpeg" />
      </div>
      <div class="spectrum-CoachMark-header">
        <div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
        <div class="spectrum-CoachMark-action-menu">

          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-CoachMark-menu is-selected">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>

          <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionButton--quiet spectrum-CoachMark-menu--mobile is-selected">
            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>

          <br>
          <div class="spectrum-Popover spectrum-Popover--bottom is-open">
            <ul class="spectrum-Menu" role="menu">
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Skip tour</span>
              </li>
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Reset tour</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="spectrum-CoachMark-content">
        Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
      </div>
      <div class="spectrum-CoachMark-footer">
      <div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>
        <div class="spectrum-ButtonGroup spectrum-CoachMark-buttongroup">
          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary">
            <span class="spectrum-Button-label">Previous</span>
          </button>

          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>

        <div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-CoachMark-buttongroup--mobile">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Previous">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft75 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75"></use>
            </svg>
          <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--primary">
            <span class="spectrum-Button-label">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Migration Guide

  • Coach Mark is now a seperate component from Coach Indicator