Avatar Group for Angular

import { AuiAvatarGroup } from '@absoluteui/angular/avatar-group';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Avatar Group page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { avatarGroup: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiAvatarGroup } from '@absoluteui/angular/avatar-group';
import type { AvatarGroupItem } from '@absoluteui/components/avatar-group';

@Component({
  selector: 'app-members',
  imports: [AuiAvatarGroup],
  template: `<aui-avatar-group label="Project members" [items]="members" [max]="3"></aui-avatar-group>`,
})
export class MembersComponent {
  readonly members: AvatarGroupItem[] = [{ name: 'Ada Lovelace' }, { name: 'Grace Hopper' }, { name: 'Alan Turing' }, { name: 'Barbara Liskov' }];
}

<aui-avatar-group>

Class AuiAvatarGroup; template reference #ref="auiAvatarGroup".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the group, such as ‘Project members’.
items	readonly AvatarGroupItem[]		Required. People: { name, src?, icon?, status? }.
max	number	'4'	Avatars shown before the ‘+N’ chip (1 to 50).
size	AvatarSize		Avatar size (default: Avatar configuration).
shape	AvatarShape		Avatar shape (default: Avatar configuration).
locale	string	'en-US'	Locale of the overflow count and label.