AvatarPair

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

<Flex gap={4} direction="row">
  <AvatarPair size="md"
    collaborators={[
      {
        name: 'Keerthi',
        src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
      },
      {
        name: 'Shanice',
        src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
      },
    ]}
  />
  <AvatarPair size="lg"
    collaborators={[
      {
        name: 'Keerthi',
        src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
      },
      {
        name: 'Shanice',
        src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
      },
    ]}
  />
</Flex>

<Flex gap={4} direction="row">
  <AvatarPair size="md"
    collaborators={[
      {
        name: 'Keerthi',
        src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
      },
      {
        name: 'Shanice',
        src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
      },
    ]}
  />
  <AvatarPair size="lg"
    collaborators={[
      {
        name: 'Keerthi',
        src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
      },
      {
        name: 'Shanice',
        src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
      },
    ]}
  />
</Flex>

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.

<Box width={100}>
  <AvatarPair
    collaborators={[
      {
        name: 'Keerthi',
        src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
      },
      {
        name: 'Shanice',
        src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
      },
    ]}
  />
</Box>

<Box width={100}>
  <AvatarPair
    collaborators={[
      {
        name: 'Keerthi',
        src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
      },
      {
        name: 'Shanice',
        src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
      },
    ]}
  />
</Box>

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.