Avatar Group | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Meet your team

Use overlapping avatars in a project summary. View team reveals every member represented by the group and its overflow counter.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuAvatarGroupComponent } from '@neural-ui/native/avatar-group';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuBadgeComponent, NeuAvatarComponent, NeuAvatarGroupComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Meet your team</text><text class="product-caption">Product workspace</text></view>
    <view class="product-surface">
      <view class="product-row"><view class="product-copy"><text class="product-heading">Mobile launch</text><text class="product-caption">Design and engineering</text></view><neu-badge label="In progress" tone="info" /></view>
      <text class="product-caption">Five people bringing the next mobile experience to life.</text>
      <neu-avatar-group [items]="members" [max]="3" size="md" moreLabel="more team members" />
      <neu-button [label]="expanded() ? 'Hide team' : 'View team'" size="sm" variant="text" (pressed)="expanded.set(!expanded())" />
    </view>
    @if (expanded()) {
      <view class="product-section">@for (member of members; track member.id) {
        <view class="product-row"><neu-avatar [label]="member.label" size="sm" /><view class="product-copy"><text class="product-heading">{{ member.label }}</text><text class="product-caption">{{ member.role }}</text></view></view>
      }</view>
    }</view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly expanded = signal(false);
  readonly members = [
    { id: 'ada', label: 'Ada Lovelace', role: 'Product designer' },
    { id: 'grace', label: 'Grace Hopper', role: 'Engineering lead' },
    { id: 'alan', label: 'Alan Turing', role: 'Mobile developer' },
    { id: 'katherine', label: 'Katherine Johnson', role: 'Quality engineer' },
    { id: 'margaret', label: 'Margaret Hamilton', role: 'Release manager' },
  ];
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

AndroidNative screenshot

iOSNative screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
items	readonly (NeuOption & { readonly uri?: string; readonly tone?: NeuTone; })[]	[]	Input	People with stable id and label, optional uri and optional tone. A member tone overrides the group tone only for that person; the overflow counter uses the group tone.
max	number	4	Input	Maximum number of visible avatars before the overflow count.
moreLabel	string	'more people'	Input	Text or accessible name used for more items. It does not perform the action by itself.
tone	NeuTone	'brand'	Input	Semantic color: neutral, brand, success, info, warning or danger. The accent value remains a compatible alias for brand. Colors use NeuTheme tokens; explain statuses with words as well as color.
size	NeuSize	'md'	Input	Avatar diameter: sm = 32, md = 40, lg = 48 points; initials use 12, 14 and 16 points. Avatar defaults to lg; AvatarGroup defaults to md and adds a 2-point separation ring.

Models

This component declares no two-way models.

Outputs

This component declares no public outputs.

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.

NeuTone

NeuTone.ts

import type { NeuTone } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';

NeuSize

NeuSize.ts

import type { NeuSize } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuSize = 'sm' | 'md' | 'lg';

Inline shape of items

This property extends a shared type inline; it is not a separately named export. The following application-side alias shows the complete accepted shape.

example-data.ts

import type { NeuOption, NeuTone } from '@neural-ui/native';

type ExampleItems = readonly (NeuOption & { readonly uri?: string; readonly tone?: NeuTone; })[];