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} alt="skeleton" />;
};

Fallback

When the src prop is undefined, default children will show. This can be used for initials, icons, or fallback images.

<Avatar>SK</Avatar>

<Avatar>💀</Avatar>

API Reference

Property	Type	Description
`src`	string	Set avatar image source URL.
`alt`	string	Set avatar image Alt text.
`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.
`children`	React.ReactNode	-