Activity Badge

About This Component

Choose between preset states (green, orange, red) or define your own custom color. Add subtle motion with three animation styles—Pulse, Shake, or Glow—and fine-tune the behavior to match your design.

Customization options include:

• Pulse: expanding rings (1, 2, or 3) with adjustable scale and opacity

• Shake: subtle left-right motion, perfect for attention or “active” feedback

• Glow: soft luminous effect for a clean, ambient highlight

• Full control over animation duration, easing, and delay

• Custom badge size (works at any dimension)

• Adjustable border radius (from circle to rounded square)

• Preset or fully custom colors

Clean, lightweight, and easy to integrate into any layout.

Perfect for availability indicators, dashboards, chat interfaces, or live status UI elements.

Note: Parent Stacks/Frames must have Overflow set to Visible, otherwise the animation may be clipped.