Avatar Compact Group

A denser Avatar Group: three small avatars and a +N count, held in a white pill.

DesignReactVuePrompts

Copy

+4

1

2

3

4

5

6

7

8

9

10

11

12

13

import { CompactAvatarGroup } from '@orvain/react';
 
<CompactAvatarGroup
  appearance="solid"
  size={32}
  max={3}
  total={8}
  avatars={[
    { id: 'ada', variant: 'text', name: 'Ada Lovelace' },
    { id: 'alan', variant: 'text', name: 'Alan Turing' },
    { id: 'grace', variant: 'text', name: 'Grace Hopper' },
  ]}
/>

Add a solid Orvain Avatar Compact Group, size 40, showing 3 memoji faces and a “+4” count.

Orvain MCPIncluded with the library

When to use#

• In table cells, kanban cards and list rows, where a full group would crowd its neighbours.
• When the number of people matters as much as who they are.

When not to use

• Use an Avatar Group when there is room and the faces matter.

Anatomy#

States#

Source#

Preview – final code pending

The Avatar Compact 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 publishedGet notified when the source is published

Used in these blocks