Avatar beta

An avatar is a visual representation that can be an image, icon, or initials, used to represent a user, team, or entity. Avatars can be customized in various sizes and shapes.

Default

To create a default avatar, add an icon element between the avatar tag. The element is set on the default slot.

<ch-avatar><ch-icon name="person"></ch-icon></ch-avatar>

Initials

Use the initials property to render the user’s initials on the avatar.

<ch-avatar initials="CM"></ch-avatar>

Image

To render an image, use the image attribute within the <ch-avatar> element.

<ch-avatar image="path/to/image.png"></ch-avatar>

Status Indicator

To render a badge to indicate the current status of the user, add a badge or icon element with the status-indicator slot set.

<ch-avatar>
  <ch-badge slot="status-indicator">
    <svg>...</svg>
  </ch-badge>
</ch-avatar>

Accessibility

To add an ‘alt’ text for the avatar, use the label attribute within the <ch-avatar> element. The label property will override the name property if both properties are set.

<ch-avatar label="Carl Myers profile"></ch-avatar>

To help give the current status of the user, for example, notifying if the user is offline or online, use the status attribute within the <ch-avatar> element.

<ch-avatar status="online"></ch-avatar>

API