# Avatar Badges

> Data-driven avatars with corner badges — photo, initials and icon content types across coloured rings, plus a presence row and an overlapping group stack, with skeleton loading, hover tooltips, staggered entrances and an async data seam.

- Category: Avatar
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Triangulum
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: icons, status, skeleton
- Page: https://builder.atheros.ai/components/avatar-badges
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_avatar_badges/preview-7e2f341ac327.webp

## 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-label`s; 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

## Common questions

**Which frameworks is Avatar Badges available in?**

Avatar Badges ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Avatar Badges free?**

Avatar Badges is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Avatar Badges support dark mode?**

Yes. Avatar Badges ships light and dark themes, both drawn from the Triangulum design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Avatar Badges live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/avatar-badges

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt