Avatar Group
Stacks multiple avatars with overlapping borders and shows an overflow count badge when items exceed the max limit. Accepts image URLs or text initials as fallback.
Basic Avatar Group
Pass an array of AvatarGroupItem objects. Each item can have an avatarUrl, initials, and name.
HTML
<ply-avatar-group [items]="users" [max]="4"></ply-avatar-group>
TypeScript
users: AvatarGroupItem[] = [
{ avatarUrl: 'https://...', name: 'Alice' },
{ initials: 'BC', name: 'Bob C.' },
];
TypeScript
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add avatar-group
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarGroupComponent } from './avatar-group/avatar-group.component';
@Component({
selector: 'app-avatar-group-example',
imports: [
AvatarGroupComponent
],
template: `...`
})
export class AvatarGroupExampleComponent {}Install
bash
npx ply-ui-cli add avatar-group
Sizes
Control avatar size with the size input: xs, sm, md, lg, xl.
HTML
<ply-avatar-group [items]="users" size="lg"></ply-avatar-group>
TypeScript
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add avatar-group
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarGroupComponent } from './avatar-group/avatar-group.component';
@Component({
selector: 'app-avatar-group-example',
imports: [
AvatarGroupComponent
],
template: `...`
})
export class AvatarGroupExampleComponent {}Install
bash
npx ply-ui-cli add avatar-group
Overflow Count
Set max to limit visible avatars. The remaining count is shown as a +N chip.
HTML
<ply-avatar-group [items]="users" [max]="3"></ply-avatar-group>
TypeScript
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add avatar-group
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarGroupComponent } from './avatar-group/avatar-group.component';
@Component({
selector: 'app-avatar-group-example',
imports: [
AvatarGroupComponent
],
template: `...`
})
export class AvatarGroupExampleComponent {}Install
bash
npx ply-ui-cli add avatar-group
Initials Fallback
If avatarUrl is omitted, the component shows initials or the first letter of name.
TypeScript
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add avatar-group
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarGroupComponent } from './avatar-group/avatar-group.component';
@Component({
selector: 'app-avatar-group-example',
imports: [
AvatarGroupComponent
],
template: `...`
})
export class AvatarGroupExampleComponent {}Install
bash
npx ply-ui-cli add avatar-group
Installation
Run the following command to add this component to your project:
bash
npx ply-ui-cli add avatar-group
API Reference
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
bash
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
typescript (Example)
// Install: npx ply-ui-cli add avatar-group
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarGroupComponent } from './avatar-group/avatar-group.component';
@Component({
selector: 'app-your-component',
imports: [
AvatarGroupComponent
],
template: `...`
})
export class YourComponent {} API for avatar-group — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-avatar-group | class | string | '' | Additional host CSS classes (merged via cn()). |
ply-avatar-group | items | AvatarGroupItem[] | [] | — |
ply-avatar-group | max | number | 4 | — |
ply-avatar-group | size | AvatarSize | 'md' | — |
Content