Avatar

A visual representation of a user or entity, typically shown as a rounded image or a fallback character.

Usage

Basic Avatar

Render the Avatar with an image source and a fallback character.

<Avatar src="https://images.unsplash.com/photo-1694832397746-b98886879b5c?w=2503&q=80" fallback="A" />

Sizing

Adjust the size of the avatar.

<Avatar src="https://images.unsplash.com/photo-1694832397746-b98886879b5c?w=2503&q=80" fallback="A" size="xlarge" />

Color & Radius

You can set the color and border radius of the avatar.

<Avatar fallback="A" color="blue" radius="full" />

Image Fallback

If the image fails to load, the avatar will display the provided fallback character.

<Avatar src="invalid_path.jpg" fallback="A" />

API

Props

Prop	Type	Default	Required
src	string	-	-
fallback	string	-	Yes
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-