Avatar

Avatar component with initials letter when have no image.

Install and import

With image

We use Shape component. You can use size from theme or override with width and height size.

Without image

Without image we add initials on the avatar with property name. We get by default ramdom color from sub colors to create the background, based on the name string. You can override with color. Font size is calculated automatically and can be override with fontSizeproperty.

With shape square

By default Avatar is a circle shape, change with property shape.

Properties

NameType(s)DefaultRequired
color
string
fontSize
string | number
height
number
name
string
shape
circle
square
circle
size
sm
md
lg
xl
xxl
md
src
string
width
number

Dependencies

Peer dependencies