Skip to content
Components

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 "@instruments/materia-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

PropTypeDefaultDescription
centerX(required)number

Horizontal position as a percentage (0-100).

centerY(required)number

Vertical position as a percentage (0-100).

classNamestring

Additional class names for the button element.

disabledboolean

Whether interaction is disabled (e.g. during processing).

focusRingClassstring

Custom focus ring classes. Defaults to grey ring for neutral, blue for blue variant.

activeboolean

Whether this hotspot is the currently selected/active one.

hoveredboolean

Whether this hotspot is being hovered.

labelstring

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.

showSpinnerboolean

Show a loading spinner overlay on the dot.

variant"neutral" | "blue"

Colour variant: "neutral" for white/dark dots, "blue" for blue dots.

Also exports

  • interfaceHotspotIndicatorProps

Composition

Builds on

Spinner