Avala Design
← Components/domain/animations

PulseDot

Color of the dot - can be a CSS color or Tailwind class

domain/animationsstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { PulseDot } from "@avala/design";

<PulseDot>PulseDot</PulseDot>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

domain-animations-pulsedot--defaultOpen in Storybook →

When to use

  • "Live" / "Streaming" / "Recording" affordances next to a label.
  • Active session indicator in a sidebar.
  • Subtle motion on a status row without the heavier StatusIndicator surface.

When not to use