Avatar

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

Avatars are visual cues that illustrate a user, group, file type, Channel, or Case Type.

Usage

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.

Example

Images

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.

Example

Icons

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

Example

Status

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.

Example

Related components

Properties

NameDescriptionDefaultType
name*The name of the identity the Avatar represents.string
backgroundColorOptional background color for the avatar. Will be auto computed if not passedstring
classNameAdditional CSS classes.string
colorOptional color for the icon to be renderedstring
iconAn icon to render as the content of the avatar. imageSrc will take precedence if passed.string
imageSrcContent of the Avatar as an image source url.string
onImageError(err: SyntheticEvent<HTMLImageElement, Event>) => void
refRef for the wrapping element.
Ref<HTMLImageElement |HTMLDivElement> 
shapeShape of the Avatar."circle"
'circle' |'squircle' 
sizeAvatar size."m"
's' |'xl' |'l' |'m' 
statusIf defined, will render status icon on the avatar.'active'

Custom theming

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

Example

Theme properties

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