# Avatar

An identity badge — a rounded image that falls back to initials when there's no photo.

<p class="kai-tag-sub">kai-avatar</p>

An identity badge for a person or an assistant — a rounded image that falls back to initials when there's no photo. It's the face next to a message or in a conversation list, not a generic icon.

## Preview

> **tip:** 
Stand in for a person or an assistant anywhere you need a small, consistent identity mark — a conversation list, a composer byline, a participant row. Give it a `src` for a photo and a `fallback` for the initials to show when the image is missing or still loading. If you're rendering a message, [Message](/components/message/) already has an `avatar` slot for this — reach for `kai-avatar` when you're laying out identity outside a thread.

## Usage

Set `src` to an image URL or data-URI and `fallback` to a short initials string. When `src` is absent — or the image fails to load — the `fallback` initials render in its place, so the badge is never empty. `alt` describes the image for assistive tech (it defaults to `fallback`), and `size` picks one of three fixed sizes. Every prop is a plain scalar attribute; there's no slotted content.

```html
<kai-avatar src="/me.jpg" alt="John Doe" fallback="JD"></kai-avatar>
<kai-avatar fallback="AI" size="sm"></kai-avatar>
```

## Examples

### Image

With a `src`, the avatar shows the image cropped to a circle. Keep `fallback` set so there's something to render while the image loads or if it 404s.

### Initials fallback

Omit `src` and the `fallback` initials show instead — useful for users who haven't set a photo, or for an assistant identity.

### Sizes

`size` is a fixed token — `sm`, `md` (default), or `lg`.

## Props

## Composed from