Avatar

Image Avatars

S
import React from "react";
import { Avatar } from "shoto-ui";
	
function AvatarComponent() {
	return (
		<Avatar alt="John Doe" src="https://via.placeholder.com/150/FF0000/FFF" />
	);
}

Letter Avatars

J
O
import React from "react";
import { Avatar } from "shoto-ui";
	
function AvatarComponent() {
	return (
		<div>
			<Avatar bgColor="yellow">J</Avatar>
			<Avatar bgColor="#33F7FF">O</Avatar>
		</div>
	);
}

Sizes

You can change avatar sizes using the height and width attributes
J
J
J
import React from "react";
import { Avatar } from "shoto-ui";
	
function AvatarComponent() {
	return (
		<div>
			<Avatar
				alt="John Doe"
				src="https://randomuser.me/api/portraits/men/75.jpg"
				height="30px" 
				width="30px"
			/>
			// default size
			<Avatar
				alt="John Doe"
				src="https://randomuser.me/api/portraits/men/75.jpg"
			/>
			<Avatar
				alt="John Doe"
				src="https://randomuser.me/api/portraits/men/75.jpg"
				height="60px" 
				width="60px"
			/>
		</div>
	);
}

Icon Avatars

Icon avatars are created by passing an icon as children.
import React from "react";
import { Avatar } from "shoto-ui";
import { AiOutlineGithub } from "react-icons/ai";

function AvatarComponent() {
	return (
		<div>
          <Avatar><AiOutlineGithub/></Avatar>
          <Avatar alt="User" bgColor="black">
            <img src="./folder.svg" />
          </Avatar>
		</div>
	);
}

Fallbacks

If there is an error loading the avatar image, the component falls back to take the first character of the alt attribute, or the character 'Z' if it is not passed.
Z
J
import React from "react";
import { Avatar } from "shoto-ui";

function AvatarComponent() {
	return (
		<div>
          <Avatar src="./broken-image.png"/>
          <Avatar alt="John Doe" bgColor="red" src="./broken-image.jpg"/>
		</div>
	);
}