Avatar

Renders an accessible label associated with controls.

 import { Component } from '@angular/core';
 
import {
    RdxAvatarFallbackDirective,
    RdxAvatarImageDirective,
    RdxAvatarRootDirective
} from '@radix-ng/primitives/avatar';
 
@Component({
    selector: 'radix-avatar-demo',
    standalone: true,
    imports: [RdxAvatarRootDirective, RdxAvatarImageDirective, RdxAvatarFallbackDirective],
    template: `
        <div style="display: flex; gap: 20px">
            <span class="AvatarRoot" rdxAvatarRoot>
                <img
                    class="AvatarImage"
                    rdxAvatarImage
                    src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
                    alt="Colm Tuite"
                />
                <span class="AvatarFallback" rdxAvatarFallback rdxDelayMs="600">CT</span>
            </span>
            <span class="AvatarRoot" rdxAvatarRoot>
                <img
                    class="AvatarImage"
                    rdxAvatarImage
                    src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
                    alt="Pedro Duarte"
                />
                <span class="AvatarFallback" rdxAvatarFallback rdxDelayMs="600">JD</span>
            </span>
            <span class="AvatarRoot" rdxAvatarRoot>
                <span class="AvatarFallback" rdxAvatarFallback>PD</span>
            </span>
        </div>
    `,
    styleUrl: 'avatar-demo.css'
})
export class AvatarDemoComponent {}

 .AvatarRoot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    user-select: none;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background-color: var(--black-a3);
}
 
.AvatarImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
 
.AvatarFallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: var(--violet-11);
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
}

Features

Automatic and manual control over when the image renders.
Fallback part accepts any children.
Optionally delay fallback rendering to avoid content flashing.

Anatomy

Import all parts and piece them together.

 <span rdxAvatarRoot>
    <img rdxAvatarImage />
    <span rdxAvatarFallback></span>
</span>

API Reference

Image

RdxAvatarImageDirective

The image to render. By default it will only render when it has loaded. You can use the onLoadingStatusChange handler if you need more control.

Prop	Default	Type
`src`	`—`	`InputSignal<undefined \| string>`

Emit	Payload
`onLoadingStatusChange`	`[value: RdxImageLoadingStatus]` A callback providing information about the loading status of the image. This is useful in case you want to control more precisely what to render as the image is loading.

Fallback

RdxAvatarFallbackDirective

An element that renders when the image hasn’t loaded. This means whilst it’s loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections.

For more control, use the onLoadingStatusChange handler on rdxAvatarImage .

Prop	Default	Type
`delayMs`	`0`	`InputSignal<number>` Useful for delaying rendering so it only appears for those with slower connections.