Avatar

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

export const Page: React.FC = () => {
	const imgSrc =
		'https://images.unsplash.com/photo-1620122303020-87ec826cf70d?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';

	return <Avatar src={imgSrc} name="skeleton" />;
};

Fallback

When src or srcSet are missing or fail to load, a fallback will be displayed. By default this will show the user initials, based on the name. Optionally you can suppy your own content using the default children. This can be used to display icons or even pass a Next.js image component.

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

export const Page: React.FC = () => {
	return (
		<div className="flex gap-4">
			<Avatar name="John Doe"></Avatar>
			<Avatar name="icon" background="preset-filled-primary-500">
				<Skull size={24} />
			</Avatar>
		</div>
	);
};

API Reference

Property	Type	Description
`src`	string	The source of the avatar image.
`srcSet`	string	The source set of the avatar image.
`name` *	string	Provide a name or username for the avatar.
`filter`	string	Set avatar image filter name, such as: "#Apollo".
`base`	string	Set base styles.
`background`	string	Set background styles.
`size`	string	Set size styles.
`font`	string	Set font styles.
`border`	string	Set border styles.
`rounded`	string	Set border radius styles.
`shadow`	string	Set shadow styles.
`classes`	string	Provide arbitrary CSS classes.
`imageBase`	string	Set avatar image base styles.
`imageClasses`	string	Provide avatar image arbitrary CSS classes.
`fallbackBase`	string	Set base classes for the fallback element.
`fallbackClasses`	string	Provide arbitrary CSS classes to fallback element.
`children`