Avatar Badges

Features

• Five labelled rows — photo, initials, icon, presence and an overlapping stack — all rendered from a single data array
• Async data seam: fetchAvatarGroups() simulates a network fetch and returns a deep clone, ready to swap for a real endpoint
• Skeleton loading state that cross-fades and cross-blurs into the real avatars when data arrives
• Tabler icon badges (crown, shield, pin, minus, plus, check, calendar) and numeric count badges with round or square shapes
• Coloured ring variants (amber, violet, blue, red, rose, gray) with round and square avatar shapes
• Presence row with online/away/busy/focus/offline status dots and a gentle pulse ring on the online dot
• Overlapping avatar stack with a distance-falloff hover lift and a "+N" overflow chip
• Hover and focus tooltips (Name — Role) with an appear-delay and an instant exit
• Interactive <button> avatars with descriptive aria-labels; clicking a count badge clears it with a springy close
• Photo avatars fall back to tinted initials automatically when a source fails to load
• Static avatar cores with outline-only hover motion, design-system panel elevation, and reduced-motion support

Accessibility

Interactive avatars

Each avatar is a <button> with an aria-label of name, role and, where relevant, notification count or status

Image alternative

Photo <img>s are decorative (alt="") since the label carries the name; failed photos fall back to tinted initials

Decorative details

Badges, status dots and tooltips are aria-hidden so state is conveyed through the button label

Loading state

The stage sets aria-busy while the skeleton is shown and clears it once data renders

Focus indicators

:focus-visible outline on every avatar button; tooltips also appear on focus

Reduced motion

prefers-reduced-motion: reduce disables all animations and transitions

Customise it with AI

Open Avatar Badges in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the avatar is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.