PulseDot

A tiny colored dot with a soft radiating pulse. Perfect for live indicators, notification badges, and status markers.

Status indicators

Pair a PulseDot with a label to communicate live state inline.

Sizes

Scale the dot with the size prop.

Notification badge

Anchor a pulse dot to a button or icon to draw attention to new activity.

Usage

import { PulseDot } from "@mantleui/react/motion";

<div className="flex items-center gap-2">
  <PulseDot color="#ef4444" size={10} />
  <span>Live broadcasting</span>
</div>

Props