Skip to main content
The CometChatAvatar component displays user and group avatars. For users and groups , it displays either an image or the user’s avatar and falls back to the first two letters of the username.

​
How to integrate CometChatAvatar ?

CometChatAvatar can be used by adding the following code snippet.
  • TypeScript
<CometChatAvatar
  image={avatarImage}
  name={avatarName}
  style={avatarStyle}
 />

​
Properties

PropertiesTypeDescription
imageImageTypeImage to display
namestringName letters to display if image is not loaded
styleAvatarStyleInterfaceused to customize appearance of the Avatar

​
AvatarStyleInterface

PropertiesTypeDescription
backgroundColorstringSets the background colour for Avatar
heightnumber | stringSets height for Avatar
widthnumber | stringSets the border width for Avatar
borderBorderStyleInterfaceSets the border colour for Avatar
borderRadiusnumberSets border radius for Avatar
nameTextFontFontStyleInterfaceSets the text font for Avatar
nameTextColorstringSets the text colour for Avatar
outerViewBorderStyleInterfaceSets the outerView width for Avatar
outerViewSpacingnumberSets the outerView spacing for Avatar
  • TypeScript
<CometChatAvatar
  image={avatarImage}
  name="Andrew Joseph"
  style={{ borderRadius: 8, height: 100, width: 100 }}
/>