HotSpot

Пульсирующая точка-индикатор, которая привязывается к целевому UI-элементу. Используется для привлечения внимания к новой функции, непрочитанному статусу или обучающему шагу онбординга.

Демо

<HotSpot appearance="primary" duration="2s" enabled offsetX="0" offsetY="0" placement="right-top" pulse />

Когда использовать

• Подсветка новой функции в меню или тулбаре.
• Индикатор непрочитанного статуса рядом с пунктом навигации.
• Шаг обучающего онбординга — точка указывает на следующее действие.

Когда не нужен HotSpot: для количественных бейджей используйте Counter; для постоянных статусов — Tag.

Анатомия

Appearance

Цветовая семантика точки: primary — нейтральный акцент бренда; red — ошибка/важное уведомление; orange, yellow — предупреждение; green — успех/онлайн; blue, violet, pink — декоративные категории.

Placement

Позиция точки относительно родителя: left|center|right × top|bottom плюс чистый left/right/center (по вертикали центрируются).

Установка

pnpm add @cloud-ru/ds-hot-spot

import { HotSpot, APPEARANCE, PLACEMENT } from '@cloud-ru/ds-hot-spot'

Примеры использования

HotSpot на кнопке

import { Button } from '@cloud-ru/ds-button';
import { HotSpot } from '@cloud-ru/ds-hot-spot';

export function OnButton() {
  return (
    <HotSpot placement='right-top'>
      <Button label='Уведомления' view='outline' />
    </HotSpot>
  );
}

Без анимации пульсации

import { Button } from '@cloud-ru/ds-button';
import { HotSpot } from '@cloud-ru/ds-hot-spot';

export function NoPulse() {
  return (
    <HotSpot placement='right' pulse={false}>
      <Button label='Settings' view='outline' />
    </HotSpot>
  );
}

Красный акцент

import { Button } from '@cloud-ru/ds-button';
import { HotSpot } from '@cloud-ru/ds-hot-spot';

export function RedAccent() {
  return (
    <HotSpot appearance='red' placement='right-top'>
      <Button label='Ошибки' view='outline' />
    </HotSpot>
  );
}

Standalone dot (без children)

import { HotSpot } from '@cloud-ru/ds-hot-spot';

export function Standalone() {
  return <HotSpot appearance='green' />;
}

Props

Types

HotSpotProps

Unions

Appearance

Placement

Storybook

Figma