Avatar

tsx

import { Avatar } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<div className="flex items-center gap-8">
			{/* Small */}
			<Avatar className="size-10">
				<Avatar.Image src="https://i.pravatar.cc/40?img=48" alt="small" />
				<Avatar.Fallback>SK</Avatar.Fallback>
			</Avatar>
			{/* Base */}
			<Avatar>
				<Avatar.Image src="https://i.pravatar.cc/60?img=48" alt="base" />
				<Avatar.Fallback>SK</Avatar.Fallback>
			</Avatar>
			{/* Large */}
			<Avatar className="size-20">
				<Avatar.Image src="https://i.pravatar.cc/80?img=48" alt="large" />
				<Avatar.Fallback>SK</Avatar.Fallback>
			</Avatar>
		</div>
	);
}

svelte

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

<div class="flex items-center gap-8">
	<!-- Small -->
	<Avatar class="size-10">
		<Avatar.Image src="https://i.pravatar.cc/40?img=48" alt="small" />
		<Avatar.Fallback>SK</Avatar.Fallback>
	</Avatar>
	<!-- Base -->
	<Avatar>
		<Avatar.Image src="https://i.pravatar.cc/60?img=48" alt="base" />
		<Avatar.Fallback>SK</Avatar.Fallback>
	</Avatar>
	<!-- Large -->
	<Avatar class="size-20">
		<Avatar.Image src="https://i.pravatar.cc/80?img=48" alt="large" />
		<Avatar.Fallback>SK</Avatar.Fallback>
	</Avatar>
</div>

Fallback

Use a fallback when an image fails to load or is unavailable.

Filter

Apply SVG Filters to avatar images.

tsx

import { Avatar } from '@skeletonlabs/skeleton-react';

export default function Filter() {
	return (
		<>
			<Avatar>
				<Avatar.Image src="https://i.pravatar.cc/150?img=48" className="filter-[url(#apollo)]" alt="filtered" />
				<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>
		</>
	);
}

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)]" alt="filtered" />
	<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>

Anatomy

Here’s an overview of how the Avatar component is structured in code:

tsx

import { Avatar } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<Avatar>
			<Avatar.Image />
			<Avatar.Fallback />
		</Avatar>
	);
}

API Reference

Root

Prop	Default	Type
`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`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	AvatarApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(avatar: AvatarApi<PropTypes>) => ReactNode

Image

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"img">) => Element) \| undefined Render the element yourself

Fallback

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

Root

Prop	Default	Type
`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

Provider

Prop	Default	Type
`value`	—	() => AvatarApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => AvatarApi<PropTypes>]>

Image

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"img">]> \| undefined Render the element yourself

Fallback

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Fallback

Filter

Anatomy

API Reference

Root

Provider

Context

Image

Fallback

Root

Provider

Context

Image

Fallback