Search blocks by description or jump to a page.
A badge with a soft pulsing ring that radiates outward on a loop. Use it to signal live activity, unread items, or a recording session in progress.
Pulse Badge renders four badge variants side by side in a centered, wrapping row. Each badge carries a continuous, subtle opacity pulse that fades to 70 percent and recovers on a two second loop. The four variants shown are default, secondary, destructive, and outline, so you can see the animation at work across the full range of badge styles at once.
All four items share the same animation and the same compact badge shape. The label text, the variant, and the number of badges on screen are all yours to change. You can drop in a single variant or show all four depending on how many live states your interface needs to communicate.
This block fits anywhere a creative agency or studio needs to signal that something is active right now. A live project status panel, an in-progress review indicator, or a "recording" tag on a video session all benefit from a gentle visual pulse that draws the eye without demanding attention. It reads more quietly than a hard blink and more urgently than a plain static badge, which makes it the right choice when you want ambient awareness rather than an alarm.
A natural flow around it on a Components page:
Before
After
The pulse animation pairs well with any label that describes an ongoing state rather than a fixed category. A few ways to put it to work:
Tip: register the
animate-pulse-subtlekeyframe in your global CSS once and reuse it on any badge or dot across the whole project.