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.

Usage

It comes in two forms :

1. A Single Avatar

<EAvatar/>

<template>
<EAvatar title="user_name"/>
<EAvatar src="image_source"/>
</template>

2. Avatar Group

<EAvatarGroup>..

The avatar group displays several avatars together.

<template>
<EAvatarGroup>
  <EAvatar src="image_source1"/>
  <EAvatar src="image_source2"/>
</EAvatarGroup>
</template>

Props

For EAvatar component, the following props are available:

Prop	Type	Default	Note
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
rounded	Boolean	false	It creates a circular avatar.
square	Boolean	false	Removes rounded corners of the element.
href	String	-	This attribute creates a linked avatar.
to	[String, Object]	-	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.
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.