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

```tsx

	return (
		<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.

```tsx

	return (
		<Avatar>
			<Avatar.Fallback>SK</Avatar.Fallback>
		</Avatar>
	);
}

```

## Filter

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

```tsx

	return (
		<>
			<Avatar>
				<Avatar.Image src="https://i.pravatar.cc/150?img=48" className="filter-[url(#apollo)]" />
				<Avatar.Fallback>SK</Avatar.Fallback>
			</Avatar>
			<svg className="absolute -left-full w-0 h-0">
				<filter id="apollo" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" colorInterpolationFilters="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"
					/>
				</filter>
			</svg>
		</>
	);
}

```

## 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` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### AvatarRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | AvatarApi<PropTypes> |  |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### AvatarRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | (avatar: AvatarApi<PropTypes>) => ReactNode |  |

### AvatarImage

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"img">) => Element) | undefined | Render the element yourself |

### AvatarFallback

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"span">) => Element) | undefined | Render the element yourself |