# Avatar
An image with a fallback for representing the user.

```svelte
// Error loading file, please report this issue.
```

## Fallback

Use `<Avatar.Fallback>` to provide initials, icons, or a framework-specific image component.

```svelte
// Error loading file, please report this issue.
```

## Filter

Avatars can implement [SVG Filters](/docs/guides/cookbook/svg-filters) using the image `class` attribute.

```svelte
// Error loading file, please report this issue.
```

## API Reference

### AvatarRoot

| Property | Type | Description |
| --- | --- | --- |
| `onStatusChange` | ((details: StatusChangeDetails) => void), undefined | Functional called when the image loading status changes. |
| `ids` | Partial<{ root: string; image: string; fallback: string; }>, undefined | The ids of the elements in the avatar. Useful for composition. |
| `getRootNode` | (() => ShadowRoot, Node, Document), undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `dir` | "ltr", "rtl", undefined | The document's text/writing direction. Default: "ltr" |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### AvatarRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | () => AvatarApi<PropTypes> |  |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### AvatarRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | Snippet<[() => AvatarApi<PropTypes>]> |  |

### AvatarImage

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"img">]>, undefined | Render the element yourself |

### AvatarFallback

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"span">]>, undefined | Render the element yourself |