Avatar

EAvatar is a visual representation of a user. The EAvatar component is typically used to display user profile pictures or placeholders, such as icons or user initials. It is available in a variety of sizes and shapes. Demo Here

‣ This component can be used by the EAvatarGroup for advanced avatar options.

Import

import EAvatar from "@components/Elements/EAvatar";
import EAvatarGroup from "@components/Elements/EAvatar/EAvatarGroup";

Usage

It comes in two forms :

1. A Single Avatar

<EAvatar/>

<EAvatar title="User Name"/>
<EAvatar src="image_source"/>

2. Avatar Group

<EAvatarGroup>..

The avatar group displays several avatars together.

<EAvatarGroup>
  <EAvatar src="image_source1"/>
  <EAvatar src="image_source2"/>
  {/* and more .. */}
</EAvatarGroup>

Props

For EAvatar component, the following props are available:

Prop	Type	Default	Note
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
rounded	Boolean	false	It creates a circular avatar.
square	Boolean	false	Creates a square-shaped avatar.
href	String	-	This attribute creates a linked avatar.
to	String	-	This attribute creates a linked avatar.
target	String	"_self"	It specifies where to open the linked document. _self opens the linked document in the same frame as it was clicked.
size	String	"md"	The EAvatar element has three predefined sizes: sm, md, lg.
className	String	-	Overrides or extends the component's styles.
src	String	-	By using image src prop the EAvatar element will be visualized in an image form.
alt	String	-	The alt attribute specifies an alternate text for an area, if the image cannot be displayed.
variant	String	"fill"	The EAvatar element can be represented in two ways: fill and alternate. alternate displays the avatar with a light background.
title	String	-	Title to show in avatar if there is no image src provided. The avatar is generated with initials (e.g Mike Dorsey will be presented as MD).
color	String	"primary"	The given color is applied to the avatar - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
icon	Object	-	By using icon prop the EAvatar element will be visualized in an Icon form. More Info about icons here.

For EAvatarGroup component, the following props are available:

Prop	Type	Default	Note
className	String	-	Overrides or extends the component's styles.
max	Number	-	Limits the number of displayed avatars.
color	String	"primary"	The given color is applied to the avatar - utility colors are supported (e.g. primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.

Callback Functions

The EAvatarGroup component contains following callback functions.

Function	Description
onSurplusClick	Callback fired on surplus avatar click. function(event: React.SyntheticEvent) => void 👇 • event: The event source of the callback.