Beacons & highlights

Beacons are pulsing dots that invite people in instead of interrupting them. Highlights spotlight one element without a full tour.

Reports Export Inbox

Each dot has a 44px hit area. Beacons hide while a tour or highlight is showing.

Beacons and highlights

<script lang="ts">
  import { SpotlightBeacon, SpotlightHighlight, useSpotlight } from 'svelte-tourlight';
  let showNew = $state(false);
  const tour = useSpotlight();
</script>

<!-- A pulsing dot that starts a tour -->
<SpotlightBeacon target="#reports" tour="reports-tour" label="Learn about reports" />

<!-- A dot that opens a one-off highlight -->
<SpotlightBeacon
  target="#export"
  label="What does Export do?"
  highlight={{ title: 'Export', content: 'Download your data as CSV.' }}
/>

<!-- Declarative highlight -->
<SpotlightHighlight active={showNew} target="#inbox" title="New: Inbox"
  content="Messages now live here." onDismiss={() => (showNew = false)} />

<!-- Imperative highlight -->
<button onclick={() => tour.highlight({ target: '#inbox', title: 'Inbox', content: '…' })}>
  What's new
</button>