# Avatar

> A user image with an initials fallback.

## Examples

### Image and fallback

```vue
<template>
  <div class="demo-row">
    <UiAvatar name="Ada Lovelace" src="/avatars/ada.svg" size="large" />
    <UiAvatar name="Grace Hopper" src="/avatars/grace.svg" />
    <UiAvatar name="Alan Turing" src="/missing.png" />
    <UiAvatar name="Linus" size="small" />
  </div>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` (required) | `string` | — | Accessible name, and the source of the initials fallback. |
| `src` | `string` | — | Image URL. Falls back to initials if it's missing or fails to load. |
| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Size hook, exposed as `data-avatar-size`. |

| Slot | Props | Description |
| --- | --- | --- |
| `fallback` | `{ initials: string; }` | Shown without an image. Defaults to the initials. |

## Styling

- Parts (`[data-part="…"]`): `avatar`, `avatar-image`
- State attributes: `data-avatar-size`

## Accessibility

- Screen readers hear `name`.
- The initials show until the image loads, and stay if it fails.