Notification Badge

Animated notification badge with dot, count, and status variants for displaying alerts and user presence.

Installation

npx smoothui-cli add notification-badge

Features

• Three variants: dot (simple indicator), count (number badge), status (presence indicator)
• Animated count changes with scale pop effect
• Ping animation for attention-grabbing alerts
• Status colors for user presence: online (green), offline (gray), busy (red), away (yellow)
• Flexible positioning in all four corners
• Wraps any element as children
• Respects reduced motion preferences
• Accessible with proper ARIA attributes

Accessibility

ARIA Attributes

Screen Reader

• The badge count is rendered as plain text, readable by screen readers.
• The component wraps children in a span with relative inline-flex positioning, preserving the semantic meaning of the wrapped element.

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, entrance/exit scale animations are disabled, the animated count transitions appear instantly, and the ping animation is not rendered.

Props

Created by

Edu Calvo

Powered by

motion.dev