Data display

Avatar

Themed avatar facepile that stacks avatars with an overflow chip and an accessible count label.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjAvatarGroupComponent } from '@kouji-ui/components';
04

Playground

#playground
AL BR CY DA
size
shape
max visible
total
items
<kj-avatar-group
  [kjMax]="3"
  [kjTotal]="6"
  kjSize="md"
  kjShape="circle"
>
  <kj-avatar content="AL" alt="Alice" />
  <kj-avatar content="BR" alt="Bruno" />
  <kj-avatar content="CY" alt="Cyrille" />
  <kj-avatar content="DA" alt="Dara" />
</kj-avatar-group>