Component <Avatar />

Props

Props	Type	Meaning	Possible values
width	number	Change avatar width	from 0 to any number
height	number	Change avatar height	from 0 to any number
radius	string	Set border radius	rounded / squared
src	string	Set avatar image url	image path
alt	string	Set avatar alternative text	image alternative name
fit	string	Change how an image should scale if the dimensions of the image are different from avatar	cover / contain
color	string	Change avatar backgound. Works only with 'children' prop	primary / dark / white / transparent
fontSize	number	Change avatar text font size	from 0 to any number

---

Sizes

Examples:

<Avatar width={32} height={32} src="gift.svg" alt="avatar" />
<Avatar width={48} height={48} src="gift.svg" alt="avatar" />
<Avatar width={64} height={64} src="gift.svg" alt="avatar" />

---

Shapes

Examples:

<Avatar radius="0" src="gift.svg" alt="avatar" />
<Avatar radius="12px" src="gift.svg" alt="avatar" />
<Avatar radius="50%" src="gift.svg" alt="avatar" />

---

Fits

Examples:

<Avatar width={64} height={48} fit="contain" src="gift.svg" alt="avatar" />
<Avatar width={64} height={48} fit="cover" src="gift.svg" alt="avatar" />

---

Text

Examples:

<Avatar>T</Avatar>
<Avatar>E</Avatar>
<Avatar>XT</Avatar>

T

E

XT

---

Text Colors

Examples:

<Avatar color="primary">T</Avatar>
<Avatar color="white">E</Avatar>
<Avatar color="dark">X</Avatar>
<Avatar color="transparent">T</Avatar>

T

E

X

T

---

Text Size

Examples:

<Avatar fontSize={34}>C</Avatar>
<Avatar fontSize={14}>Nick</Avatar>
<Avatar fontSize={10}>Money</Avatar>

C

Nick

Money