# Avatar
> Generated from avatar.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `name` | string | `—` | Full name; initials are derived when no src/icon. Also the alt/aria-label |
| `src` | string | `—` | Image URL; the photo content mode (overrides icon/initials) |
| `icon` | string | `—` | DS icon name (e.g. 'system-user'); the glyph content mode when no src |
| `size` | 'small' | 'default' | 'large' | number | `default` | 24 / 40 / 64 named steps, or any numeric px |
| `shape` | circle | square | `circle` | Clip shape |
| `color` | token name | `—` | Ground tint — an --aha-* token suffix, e.g. 'bg-positive' |
| `max` | number | `—` | (aha-avatar-group) collapse children past this count into a +N chip |

## Visual standard (measured)
- Size: small 24 · default 40 · large 64 (named), or any numeric px via `size`
- Shape: circle (pill radius) · square (radius 8)
- Initials: bg-accent #F9F5FF, purple-60 #6A1EBB, SemiBold 600
- Image: object-fit cover, clipped to shape
- Icon: <aha-icon> glyph by name, ~half the avatar diameter, currentColor
- Color: ground tint from an --aha-* token via `color` (default brand tint)
- Group: stacked overlap (-10px), 2px container-white ring, +N chip past `max`

## When to use
- **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

Always provide `name` even when `src` is set — it becomes the alt text and the initials fallback if the image fails. Prefer initials or a photo over a generic icon for a real identity; reserve the icon mode for a placeholder/guest slot. In a group, keep sizes uniform and set `max` so the +N chip stays legible.