# Avatar Supply `image` when you have a URL, `initials` for explicit letters, or `name` to derive up to two characters. Without those, set `icon` or accept the default person glyph. `loading` swaps content for a spinner while `ariaLabel` or `name` feeds the required accessible name on the `img` role host. ## Import ```ts import { AvatarComponent } from 'ui'; ``` ## Image, initials, name, or icon ```ts import { Component } from '@angular/core'; import { AvatarComponent } from 'ui'; @Component({ selector: 'app-avatar-basic-example', standalone: true, imports: [AvatarComponent], template: `
image
initials
name
icon
`, }) export class AvatarBasicExampleComponent {} ``` ## Variant and appearance ```ts import { Component } from '@angular/core'; import { AvatarComponent } from 'ui'; @Component({ selector: 'app-avatar-appearance-example', standalone: true, imports: [AvatarComponent], template: `
`, }) export class AvatarAppearanceExampleComponent {} ``` ## Size and shape ```ts import { Component } from '@angular/core'; import { AvatarComponent, Shape, Size } from 'ui'; @Component({ selector: 'app-avatar-layout-example', standalone: true, imports: [AvatarComponent], template: `
@for (size of sizes; track size) {
{{ size }}
}
@for (shape of shapes; track shape) {
{{ shape }}
}
`, }) export class AvatarLayoutExampleComponent { protected readonly sizes: Size[] = ['small', 'medium', 'large']; protected readonly shapes: Shape[] = ['rounded', 'circular', 'square']; } ``` ## Disabled and loading ```ts import { Component } from '@angular/core'; import { AvatarComponent } from 'ui'; @Component({ selector: 'app-avatar-states-example', standalone: true, imports: [AvatarComponent], template: `
default
disabled
loading
`, }) export class AvatarStatesExampleComponent {} ``` ## Collaborator strip ```ts import { Component } from '@angular/core'; import { AvatarComponent, ButtonComponent } from 'ui'; @Component({ selector: 'app-avatar-workspace-strip-example', standalone: true, imports: [AvatarComponent, ButtonComponent], template: `
Design review ·
+4
Join room
`, }) export class AvatarWorkspaceStripExampleComponent {} ``` ## Profile header ```ts import { Component } from '@angular/core'; import { AvatarComponent, ButtonComponent } from 'ui'; @Component({ selector: 'app-avatar-profile-header-example', standalone: true, imports: [AvatarComponent, ButtonComponent], template: `
Nadia Ibrahim Program manager · Berlin Last active today · 14 direct reports in directory
Message
`, }) export class AvatarProfileHeaderExampleComponent {} ``` ## Accessibility ### Accessible name The host is `role="img"`. Provide `ariaLabel`, or `name` (also used for initials), or rely on i18n fallback text. When only `initials` are shown, set `ariaLabel` if those letters are not enough to identify the person or workspace. ### Photograph Inner `` uses an empty `alt` because the host carries the name; avoid duplicating long descriptions on both layers. ### Busy and disabled `loading` sets `aria-busy="true"`. `disabled` sets `aria-disabled="true"` while the surface stays in the tree for layout continuity.