Notification Dot Pulse
Use Notification Dot Pulse for ambient newness; use Toast Notification when the user needs to read what happened.
Use
Calling attention to a new status while preserving the user current task.
Avoid
Avoid it when the update requires action or explanation.
Safer Alternative
Pulsing HotspotRisk Level
High attention
Timing
800-1400ms pulse, one to three repetitions after the event.
Easing
Ease-out scale with fading opacity for the outer ring.
Risk
Live Demo
What It Is
A small status dot that pulses briefly to announce a new unread item or changed state without opening a full notification.
Decision Guidance
Use Notification Dot Pulse for ambient newness; use Toast Notification when the user needs to read what happened.
Best For
Calling attention to a new status while preserving the user current task.
Avoid When
Avoid it when the update requires action or explanation.
Timing
800-1400ms pulse, one to three repetitions after the event.
Easing
Ease-out scale with fading opacity for the outer ring.
Risk Tags
✓When to Use
- Unread messages or alerts
- Background status changes that need lightweight attention
- Navigation badges where the count is less important than newness
✕When NOT to Use
- Critical errors that need explicit text
- Always-on decorative badges
- Multiple nav items pulsing at the same time
Configuration Tips
- 01Pulse only when the status changes, then settle to a static dot
- 02Pair the dot with accessible text or an aria-label
- 03Use restrained scale and opacity so it does not feel like an alarm
You've Seen It In
AI Implementation Prompts
Move from a fast scaffold to production details, then tune timing and edge states.
Add a small red unread dot to the Alerts nav item. When a new alert arrives, pulse an outer ring twice, then leave the dot static.
Code Example (Tailwind CSS)
A focused implementation sketch you can adapt to your product state.
export function NotificationDotPulse() {
return (
<span className="relative inline-flex h-3 w-3" aria-label="New notification">
<span className="absolute h-3 w-3 animate-ping rounded-full bg-red-500 opacity-40" />
<span className="relative h-3 w-3 rounded-full bg-red-500" />
</span>
);
}Related Effects
Pulsing Hotspot
A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.
Toast Notification
A small, non-obtrusive popup that slides in (usually from the bottom or top right) to provide brief feedback about an operation, then disappears.
Badge Count Animation
When a notification badge value increments, the number scales up and down bouncy, and occasionally the badge itself pulses.