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.

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.

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.

Icons

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.

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.

Properties

Name	Type	Default	Description
`name*`	`string`		The name of the identity the Avatar represents.
`className`	`string`		Additional CSS classes.
`icon`	`string`		An icon to render as the content of the avatar. imageSrc will take precedence if passed.
`imageSrc`	`string`		Content of the Avatar as an image source url.
`onImageError`	`(err: SyntheticEvent<HTMLImageElement>) => void`		Optional 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.

Custom theming

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

Theme properties

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