Highlight styles
Choose how walkthroughs mark the button or field to click.
During a walkthrough, Skavelo marks the element the user should click next. On the Appearance tab, under Highlight, choose one of four styles. Selecting a style switches the preview to the walkthrough view so you can see it in action.
| Style | What it looks like | Best for |
|---|---|---|
| Beacon (default) | A ring around the element, with a dot on its corner that sends out ripples | Most products. Easy to spot, even on small icons. |
| Spotlight | Dims the rest of the page around the element | Onboarding, where you want the user's full attention |
| Trace | Draws an outline around the element, then glows softly | A polished look that stands out without dimming the page |
| Ring | A plain ring that pulses twice | The most subtle option |
All styles use your Accent color.
How highlights behave
- Motion pauses while the user interacts. The animation pauses while the pointer or keyboard focus is on the element, and resumes when it leaves.
- Clicks always pass through. Highlights never block the page, including the dimmed area of Spotlight.
- The widget stays readable. Spotlight never dims the walkthrough instructions in the widget.
- Reduced motion is respected. Users who turn on reduced motion in their operating system see a still version of each style.
You can also set the style in code with theme: { highlight: 'spotlight' }; see the SDK reference.