Avatar

Avatar component is used to render a avatar icon in the user interface. This component is used reperesent user in UI. They act as an avatar for user.

Usage

There are basically two usage either you can use it to render avatar images using src prop or you can provide a label prop which is then used to get a unique avatar based on the label provided.

JH

Code

<Avatar filled label="Jim Halpert" />

Color

The Avatar component generates a unique background color based on the label prop you provide.

J

JH

MS

DS

A

AK

Code

<Avatar label="John " />

<Avatar label="Jim Halpert" />

<Avatar label="Michael Scott" />

<Avatar label="Dwight Schrute" />

<Avatar label="Ann" />

<Avatar label="Akshay Kannan" />

Filled Avatar

The Avatar component can have a filled color by providing filled boolean prop.

J

JH

MS

DS

A

AK

Code

<Avatar filled label="John " />

<Avatar filled label="Jim Halpert" />

<Avatar filled label="Michael Scott" />

<Avatar filled label="Dwight Schrute" />

<Avatar filled label="Ann" />

<Avatar filled label="Akshay Kannan" />

Size

The size of the Avatar can be varied by using the size prop which accepts number values. By default the size is 40.

JH

DS

B

Code

<Avatar label="Jim Halpert" size={40} />

<Avatar label="Dwight Schrute" size={60} />

<Avatar label="Bob" size={80} />

Image Avatar

The Avatar component can be used to render images as avatar if src prop is provided.

Both src and label prop has to be given for image avatar.

Code

<Avatar

src="https://wallpapercave.com/wp/wp4292822.jpg"

size={80}

label="Michael Scott"

/>

API

Prop	Type	Possible values	Default Value
label	string	Any String value	""
filled	boolean	true and false	false
size	number	Any number value	40
src	string	Any image url	--

Built by Akshay 🤙