AvatarGroup

Group related people using overlapping Avatar children.

Category: Layout and content
Import: @neural-ui/core/avatar-group
Selector: neu-avatar-group

import { NeuAvatarGroupComponent } from '@neural-ui/core/avatar-group';

Usage

Project Avatar children directly into the group. Each child owns its name, image, size, color and presence. AvatarGroup only provides the overlapping layout and optional accessible group label. Use ariaLabel or ariaLabelledBy referencing a visible heading. Member limits or a remaining-member count belong to the application, not to this API.

Examples

Try the interaction and open Code for the implementation. Reset restores the initial state.

Design team

Ana Martín, Luis García and Marta Ruiz

Try and configure

Change the options and inspect the preview and generated template. Code contains the full executable source.

Live preview

Design team

Accessible group label

Label by the visible heading (ariaLabelledBy)

Generated template: reflects the options above. Open Code for the complete imports and state.

<neu-avatar-group
  ariaLabel="Design team"
>
  <neu-avatar name="Ana Martín" size="md" />
  <neu-avatar name="Luis García" size="md" />
  <neu-avatar name="Marta Ruiz" size="md" />
</neu-avatar-group>

Data and content

Only ariaLabel and ariaLabelledBy are group Inputs. Avatar properties belong to each child. There are no Outputs or models; projection does not add a member-selection interaction.

Accessibility and keyboard

A named group exposes role group. Without a name, no redundant group role is added. Referenced heading IDs must exist and be unique. Each Avatar keeps its own accessible name. Supply a nearby list of names when users need to identify everyone.

Key	Action
`—`	A named group exposes role group. Without a name, no redundant group role is added. Referenced heading IDs must exist and be unique. Each Avatar keeps its own accessible name. Supply a nearby list of names when users need to identify everyone.

API

Inputs and Outputs are extracted from the pinned package. Named types link to their definitions; Templates list only supported projection areas.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Accessible group name; enables group semantics.
`ariaLabelledBy`	`string`	`''`	`[ariaLabelledBy]`	ID of an existing visible heading that names the group.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Avatar children View example	Content projection Project Avatar children; each child controls its identity and appearance.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Avatar children

*

Group projects Avatar children; each child owns its image, initials and size.

Styles and tokens

Use the public component Inputs and Core surface, text, spacing and semantic color tokens. Keep content responsive and verify both themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`