Avatar

Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available.

Usage

Local Image

An avatar can display a local image.

Remote image

An avatar can fetch a remote image.

Fallback image

A fallback image can be set in case the src fails to load.

Loading Failure

When an image fails to load, a default image will be displayed.

Double Failure

When the fallback image fails to load, a default image will be displayed.

Src and Fallback Bypass

If no fallback image is provided and the image fails to load, the initials will be displayed instead.

Anonymous

An anonymous avatar can be displayed.

Deleted

A deleted avatar can be displayed.

Broken

A broken avatar can be displayed.

Sizes

An avatar can be displayed in different sizes.

  • Extra small (16px): use in tightly condensed layouts. This size can only accommodate one letter when using the Initials variant.
  • Small (24px): use when the medium size is too big for the layout, or when the avatar has less importance in the context.
  • Medium (32px): use as the default size
  • Large (48px): use when an avatar is a focal point, such on a member page header
  • Extra large (64px): use when an avatar is a focal point, such on a member page header

Disabled

An avatar can be disabled.

Pressable

An avatar can be pressed, which will trigger an action when pressed.

Customize the image props

Using a custom hook to retry loading the image up to 5 times with a 250ms delay.

AvatarGroup

An avatar group can be used to display multiple avatars.

Too many avatars

When there are too many avatars, a counter will be displayed.

Sizes

An avatar group can be displayed in different sizes.

Pressable avatars

An avatar group can have pressable avatars, which will trigger an action when pressed.

Max number of avatars

An avatar group can be limited to a maximum number of avatars.

Best Practices

Any time you use an image to communicate a concept in Workleap, it's important to use descriptive alt text. Doing this is important for accessibility because it allows screen readers to describe what's in the image to people who may not be able to see it.

Props

Avatar

fallbackSrc?

The src of the image to display if the image fails to load. If set to null, the initials will be displayed instead.

Defaults to BrokenImageRichIcon.
imageProps?

Props to add to the img element when src is provided.

isDisabled?

Whether or not the avatar is disabled.

name

The name of the Avatar. This will be used for the alt text of the image or the initials if no image is provided.

size?

The size of the avatar.

Defaults to md.
src?

The src of the image to display. If not provided, the initials will be displayed instead.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

style?

The inline style for the element. A function may be provided to compute the style based on component state.

AvatarGroup

size?

The size of the avatar.

Defaults to md.
maxNumberOfAvatar?

The maximum number of avatars to show before showing the overflow indicator.

Defaults to 3.
wrap?

Whether or not to wrap the avatars.

Defaults to true.
reverse?

Whether or not to reverse the order of the avatars.

align?

The alignment of the avatars within the AvatarGroup.

Defaults to 'start'.
children?

The content of the AvatarGroup.

style?

The inline style for the element.

className?

The CSS className for the element.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • retryCount has been removed.
  • onClick has been renamed to onPress to be closer to the React Aria API.