Avatar for Angular

import { AuiAvatar } from '@absoluteui/angular/avatar';

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

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

Example

import { Component } from '@angular/core';
import { AuiAvatar } from '@absoluteui/angular/avatar';

@Component({
  selector: 'app-assignee',
  imports: [AuiAvatar],
  template: `<aui-avatar [name]="name" size="sm" [status]="online ? 'online' : 'offline'"></aui-avatar>`,
})
export class AssigneeComponent {
  name = 'Ada Lovelace';
  online = true;
}

<aui-avatar>

Class AuiAvatar; template reference #ref="auiAvatar".

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

Inputs

Input	Type	Default	Description
name	string		Required. Accessible name and source of the initials.
src	string | null		Image URL: http(s), relative, blob:, or a base64 PNG, JPEG, GIF, WebP, or AVIF data URL.
icon	IconRef | null		Icon shown when the name yields no initials.
status	AvatarStatus | null		Presence dot; its name is part of the accessible name.
decorative	boolean	false	Hide from assistive technology when the name is shown next to it.
size	AvatarSize	'md'	Avatar size.
shape	AvatarShape	'circle'	Avatar shape.
locale	string	'en-US'	Locale of status names and initials casing.