# Avatar

An image with a fallback for representing the user.

```svelte
<script lang="ts">
	import { Avatar } from '@skeletonlabs/skeleton-svelte';
</script>

<Avatar>
	<Avatar.Image src="https://i.pravatar.cc/150?img=48" />
	<Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>

```

## Fallback

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

```svelte
<script lang="ts">
	import { Avatar } from '@skeletonlabs/skeleton-svelte';
</script>

<Avatar>
	<Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>

```

## Filter

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

```svelte
<script lang="ts">
	import { Avatar } from '@skeletonlabs/skeleton-svelte';
</script>

<Avatar>
	<Avatar.Image src="https://i.pravatar.cc/150?img=48" class="filter-[url(#apollo)]" />
	<Avatar.Fallback>SK</Avatar.Fallback>
</Avatar>

<svg class="absolute -left-full w-0 h-0">
	<filter id="apollo" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
		<feColorMatrix
			values="0.8 0.6 -0.4 0.1 0,
    0 1.2 0.05 0 0,
    0 -1 3 0.02 0,
    0 0 0 50 0"
			result="final"
			in="SourceGraphic"
		></feColorMatrix>
	</filter>
</svg>

```

## API Reference

### AvatarRootProps

| Property        | Default | 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"   | "ltr" \| "rtl" \| undefined                                                | The document's text/writing direction.                                                     |
| element?        | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                           | Render the element yourself                                                                |

### AvatarRootProviderProps

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

### AvatarRootContextProps

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

### AvatarImageProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"img">]> \| undefined | Render the element yourself |

### AvatarFallbackProps

| Property | Default | Type                                              | Description                 |
| -------- | ------- | ------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | Render the element yourself |