## Avatar
Represent a person or entity with a photo, initials, or an icon — solo or in a stacked group.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-avatar> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- name: string, default —. Full name; initials are derived when no src/icon. Also the alt/aria-label
- src: string, default —. Image URL; the photo content mode (overrides icon/initials)
- icon: string, default —. DS icon name (e.g. 'system-user'); the glyph content mode when no src
- size: 'small' | 'default' | 'large' | number, default default. 24 / 40 / 64 named steps, or any numeric px
- shape: circle | square, default circle. Clip shape
- color: token name, default —. Ground tint — an --aha-* token suffix, e.g. 'bg-positive'
- max: number, default —. (aha-avatar-group) collapse children past this count into a +N chip
Tokens: bg-accent, purple-60, bg-container, radius-pill, radius-default, font-product.
Use when: Avatar (identifying a person or entity — a presenter, a participant, an author); Icon (a generic symbol, not a specific identity); Tag (labelling with a category rather than an identity).