Avatar

Avatars are visual cues that illustrate a user, group, file type, channel, or case type.

For more information on how to use the features and props for this component, check out the developer documentation.

By default, the Avatar component will render initials representing whatever name is passed to it. There are also basic options that can be passed to manipulate the size and shape of the Avatar.

Avatars representing people, such as a user, should provide an imageSrc of the person if possible. By doing so, the default initials will be replaces by the image provided.

If an icon name is provided, the Avatar will render that icon against a background. This will supersede any imageSrc if both are provided. The icon prop will accept any default Cosmos Icon, or any custom icon that has been properly registered. For more information on registering custom icons, visit the Icon documentation.

Avatars can be used to indicate a status, whether it be to show that a user is online, or that a particular task is active. Passing active to the status prop will render a small green Alert badge besides the Avatar. This is currently the only status that is provided.

NameTypeDefaultDescription
name*stringThe name of the identity the Avatar represents.
classNamestringAdditional CSS classes.
iconstringAn icon to render as the content of the avatar. imageSrc will take precedence if passed.
imageSrcstringContent of the Avatar as an image source url.
onImageError(err: SyntheticEvent<HTMLImageElement>) => voidOptional error handler in the event an image fails to load.
ref
Ref<HTMLDivElement |HTMLImageElement> 
Ref for the wrapping element.
shape
'circle' |'squircle' 
"circle" Shape of the Avatar.
size
's' |'m' |'l' 
"m" Avatar size.
status'active'If defined, will render status icon on the avatar.

You can override the styles of the Avatar component by setting a custom theme on the Configuration component.

{
      •       'background-color': 'base.colors.slate.dark', // → base.colors.slate.dark
      •       'border-radius': 'base.border-radius' // → base.border-radius
      •     }
    •   }
}