An <sp-coachmark> element can be used to bring added attention to specific parts of your page.

yarn add @spectrum-web-components/coachmark

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

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

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

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

<sp-coachmark></sp-coachmark>
<sp-coachmark variant="dark"></sp-coachmark>
<sp-coachmark variant="light"></sp-coachmark>

<sp-coachmark quiet></sp-coachmark>
<sp-coachmark quiet variant="dark"></sp-coachmark>
<sp-coachmark quiet variant="light"></sp-coachmark>