AvatarPair is used to display two avatars in an overlapping grouping.

Props

Component props
Name
Type
Default
collaborators
Required
$ReadOnlyArray<{| name: string, src?: string, |}>
-

The users to be displayed.

size
"md" | "lg" | "fit"
"fit"

md: 48px, lg: 64px. If size is fit, AvatarPair will fill 100% of the parent container width.

Usage guidelines

When to Use
  • To represent a group of people, companies and/or brands in a square format.
  • In cases where the space to represent user(s) can either be a single person/company or a group of people/companies.
When Not to Use
  • In cases where a square format is not required. Use AvatarGroup instead.

Variants

Fixed sizes

Container-based sizes

The size of the avatars is defined by their container. In this case, the container is 100px wide & tall and each avatar becomes 75px.

Avatar
Avatar is the ideal component in cases where only one person or brand needs to be displayed.

AvatarGroup
AvatarGroup is the ideal component in cases where multiple people/brands (typically more than two) need to be displayed in a horizontal, non-square format.