Skip to main content
This element is used to represent a CometChat.User of CometChat.group profile picture with fallback to the initials.

​
Properties

NameTypeDescription
imagestringImage URL of the avatar
namestringFallback name of the avatar
avatarStyleAvatar StyleStyling properties of the element

​
Avatar Style

Styling properties and values of the avatar element
NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
outerViewBorderSets the border of the outer edge of the element
outerViewBorderSpacingSets the spacing between the profile picture and the outerViewBorder
borderRadiusSets the border radius of the element
backgroundColorSets the background color of the element. Reference link
backgroundSizeSets the size of the element’s background image. Reference link
nameTextColorSets the foreground color of the initials.
nameTextFontSets all the different properties of font for the initials. Reference link

​
Usage

  • JavaScript
import '@cometchat/uikit-elements'; //import the web elements package.
import  { AvatarStyle } from '@cometchat/uikit-elements'; //import the style class.

//profile pic
const profilePic = "https://media.istockphoto.com/id/1394637422/photo/confident-handsome-30s-caucasian-millennial-man-businessman.jpg?s=612x612&w=0&k=20&c=yAaiBJ7NNX1dC2XE-HZecZkUF62f-J-ypKiIT_xn7eA=";

//styling properties
const avatarStyle = new AvatarStyle({width: "28px",height: "28px"});

//use the element
<cometchat-avatar image={profilePic} avatarStyle={avatarStyle} />
⌘I