Drawer

Stable

An animated component that aims to draw a user’s attention to a specific area or spot on the screen

<script setup lang="ts">
import { HHotspot } from '@holistics/design-system'

</script>
<template>
  <div class="relative flex size-64 items-center justify-center rounded-2xl border-2 border-gray-400">
    <HHotspot position="left" />
    <span class="text-gray-600">Container</span>
  </div>
</template>

Examples

Positioning

<script setup lang="ts">
import { HHotspot } from '@holistics/design-system'

const position = { x: '10%', y: '50%' }
</script>
<template>
  <div class="relative flex size-64 items-center justify-center rounded-2xl border-2 border-gray-400">
    <HHotspot :position />
    <span class="text-gray-600">Container</span>
  </div>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
position	"top" | "right" | "bottom" | "left" | { x: string; y: string; } = "left"	Position of the hotspot within its nearest position: relative container. Use 'top' | 'bottom' | 'left' | 'right' for edge‑aligned, center‑balanced positions, or { x, y } with CSS lengths/percentages for custom placement.
noPointer	boolean	By default, the cursor when hovering over the hotspot is a pointer. To disable it, set this to true.