---
name: avatar
category: media
summary: "Image with initials fallback and optional status dot"
subpath: "@42/core/avatar"
---

Image with automatic fallback to initials + optional status dot.

```html
<div data-c42-avatar>
  <img data-c42-avatar-image src="…" alt="Jane Doe" />
  <span data-c42-avatar-fallback></span>
  <span data-c42-avatar-status></span>
</div>
```

```ts
import { Avatar } from '@42/core/avatar';
new Avatar(root, { name: 'Jane Doe', status: 'online' });
```

Options: `name` (derives initials), `status` ('online'|'offline'|'busy'|'away'|null)
Methods: `setStatus(s)`, `setSrc(url)`
Events: `avatar:load`, `avatar:error`, `avatar:statuschange` → `{ status }`