HotspotIndicator

Animated hotspot dot (outer ring + inner dot) for marking locations on images. Positioned absolutely by percentage (centerX/centerY), so it needs a positioned parent. Hover and active states are controlled by the parent via hovered/active — the dot grows and the ring pulses in response.

Usage

import { HotspotIndicator, HotspotIndicatorProps } from "@desk/ui/components/hotspot-indicator";

Best practices

Place it inside a position: relative parent — it positions itself absolutely by centerX/centerY percentages, so it lands wrong in a static-flow container.
State is parent-controlled: pass hovered/active (plus onMouseEnter/onClick) — the dot grows and the ring pulses only in response; it tracks nothing itself.
Always pass label — it's the button's aria-label and the hotspot's only accessible name; also mount ReducedMotionProvider so the pulse honours the OS motion setting.

Props

Prop	Type	Description
centerX(required)	`number`	Horizontal position as a percentage (0-100).
centerY(required)	`number`	Vertical position as a percentage (0-100).
className	`string`	Additional class names for the button element.
disabled	`boolean`	Whether interaction is disabled (e.g. during processing).
focusRingClass	`string`	Custom focus ring classes. Defaults to gray ring for neutral, blue for blue variant.
active	`boolean`	Whether this hotspot is the currently selected/active one.
hovered	`boolean`	Whether this hotspot is being hovered.
label	`string`	Accessible label for the hotspot button.
onClick	`() => void`	Called when the hotspot is clicked.
onMouseEnter	`() => void`	Called when the mouse enters the hotspot.
onMouseLeave	`() => void`	Called when the mouse leaves the hotspot.
showSpinner	`boolean`	Show a loading spinner overlay on the dot.
variant	`"neutral" \| "blue"`	Color variant: "neutral" for white/dark dots, "blue" for blue dots.

Also exports

interfaceHotspotIndicatorProps

Composition

Builds on

Spinner