Avatars

Avatars are found throughout material design with uses in everything from tables to dialog menus.

Image Avatars

Image avatars can be created by passing standard img props src or srcSet into the component.

To show this type of Avatars you will need this code in down here.

        
<Avatar className="size-100" alt="Remy Sharp"
        src="assets/images/userAvatar/domnic-harris.jpg"/>

<Avatar className="size-80" alt="Remy Sharp"
        src="assets/images/userAvatar/garry-sobars.jpg"/>

<Avatar className="size-60" alt="Remy Sharp"
        src="assets/images/userAvatar/stella-johnson.png"/>

<Avatar alt="Adelle Charles"
        src="assets/images/userAvatar/man-3.jpg"/>

<Avatar className="size-30" alt="Remy Sharp"
        src="assets/images/userAvatar/alex-dolgove.png"/>
        
        

Letter Avatars

Avatars containing simple characters can be created by passing your string as children.

  
<Avatar className="bg-primary size-100"><h1 className="m-0 text-white">DK</h1></Avatar>

<Avatar className="bg-secondary size-80">M</Avatar>

<Avatar className="bg-success size-60 text-white">G</Avatar>

<Avatar className="bg-warning"><h3 className="m-0 text-white">R</h3></Avatar>

<Avatar className="bg-info size-30"><h3 className="m-0 text-white">s</h3></Avatar>
  
        

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
alt	string		Used in combination with src or srcSet to provide an alt attribute for the rendered img element.
children	node		Used to render icon or text elements inside the Avatar. src and alt props will not be used and no img will be rendered by default. This can be an element, or just a string.
classes	object		Useful to extend the style applied to components.
component	union: string |  func	'div'	The component used for the root node. Either a string to use a DOM element or a component.
imgProps	object		Properties applied to the img element when the component is used to display an image.
sizes	string		The sizes attribute for the img element.
src	string		The src attribute for the img element.
srcSet	string		The srcSet attribute for the img element.