Show avatars in pairs

Props

Name
Type
Default
collaborators
Required
Array<{| name: string, src?: string |}>
-
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.

Example: Basic

Keerthi
Shanice

Example: Fit container width

The size of the avatars is defined by their container. In this case the container is 64px wide & tall and each avatar is 48px.

Keerthi
Shanice