<sp-coach-indicator> shows the connection between an object and its explanation in a touring mode — for example, the source of a coachmark in an onboarding tour.

yarn add @spectrum-web-components/coachmark

Import the side effectful registration of <sp-coach-indicator> via:

import '@spectrum-web-components/coachmark/sp-coach-indicator.js';

When looking to leverage the CoachIndicator base class as a type and/or for extension purposes, do so via:

import { CoachIndicator } from '@spectrum-web-components/coachmark';

A coach indicator consists of a single animated visual indicator.

<sp-coach-indicator></sp-coach-indicator>

Coach indicators support different static color options to ensure visibility against different backgrounds:

<sp-coach-indicator></sp-coach-indicator>
<sp-coach-indicator static-color="dark"></sp-coach-indicator>
<sp-coach-indicator static-color="light"></sp-coach-indicator>

<sp-coach-indicator quiet></sp-coach-indicator>
<sp-coach-indicator quiet static-color="dark"></sp-coach-indicator>
<sp-coach-indicator quiet static-color="light"></sp-coach-indicator>

Coach indicators are typically paired with coachmarks to create accessible user onboarding experiences. When using coach indicators:

• Ensure they are clearly visible against their background
• Use appropriate static colors based on the background color
• Pair them with descriptive coachmarks that explain the indicated UI element

API