Search blocks by description or jump to a page.
A badge paired with a small colored dot that shows status at a glance. Use it to show online, busy, or away states next to a name or avatar.
Dot Indicator Badge shows four badge variants side by side in a centered, wrapping row. Each badge carries a small animated dot on its left: an outer ring pulses outward on a loop while a solid inner circle stays fixed, producing a live signal effect. The four variants are Default, Secondary, Destructive, and Outline, so you can see the dot rendered against every standard fill and border style in one place.
The label text and the choice of which variants to include are both easy to adjust. You can use a single variant in isolation, swap the labels for real status words, or reorder the row to match your interface. The pulsing animation runs automatically and requires no extra state.
Reach for this block when your product surfaces presence or availability and you need a compact, text-paired indicator. On an HR or hiring platform it works well on candidate cards, recruiter inboxes, or interview scheduling panels where a glanceable dot tells a hiring manager whether a candidate or colleague is active, away, or unavailable. It is better suited to inline contexts than the Pulse Badge, which draws more attention and suits counters or notifications rather than persistent status labels.
A natural flow around it on a Components page:
Before
After
Each badge is self-contained, so you can drop one or all four wherever you need them. A few practical uses:
Tip: pair the Destructive variant sparingly. Because red carries urgency, reserve it for states that genuinely need attention rather than neutral ones.