Avatar Group

A row of overlapping avatars for members, assignees or viewers. People beyond the visible limit are shown as a "+N" count at the end.

import { AvatarGroup } from '@orvain/react';
 
<AvatarGroup
  size={40}
  max={4}
  total={12}
  avatars={[
    { id: 'ada', variant: 'image', src: '/ada.jpg', alt: 'Ada Lovelace' },
    { id: 'alan', variant: 'text', name: 'Alan Turing' },
    { id: 'grace', variant: 'text', name: 'Grace Hopper' },
  ]}
/>

Add an Orvain Avatar Group, size 100, showing 4 memoji faces with verified badges and online dots, then a “+9” disc.

Orvain MCPIncluded with the library

When to use#

On cards, rows and headers, to show a set of people in a small space.
When recognising faces matters more than the full list. The list can open on click.

When not to use

Use an Avatar Compact Group when space is very tight or the count matters most.

Anatomy#

1Avatars

Two to four memoji avatars, each tucked under the next (20px overlap at 100, 4px at 24), with their badges.

2More

A +N disc 4px larger than the avatars, #fcfcfc, in Satoshi Bold.

States#

Sizes

100, 80, 72, 64, 56, 48, 40, 32 and 24.

3rd / 4th

Show two, three or four faces before the count.

Hide the +N disc when everyone is shown.

Source#

Preview – final code pending

The Avatar Group is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

cards kanban tables