Avatar
Represent a user or entity as a picture or initials, with an automatic fallback when the image hasn't loaded yet or fails to load.
Avatar represents a user or entity as a picture or initials, switching between the two automatically as the
image loads, fails, or is absent — no manual state handling required. It is composed of the Avatar
container plus two projected sub-components, AvatarImage and AvatarFallback.
Minimal example
import { Component } from "@angular/core";
import { AvatarComponent, AvatarImageComponent, AvatarFallbackComponent } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [AvatarComponent, AvatarImageComponent, AvatarFallbackComponent],
template: `
<avatar size="large">
<AvatarImage src="https://i.pravatar.cc/150?img=12" alt="Jane Doe" />
<AvatarFallback>JD</AvatarFallback>
</avatar>
`,
})
export class SampleComponent {}How it works
AvatarImage preloads its src through an off-DOM Image() probe before anything renders, so there is never
a layout-shifting broken-image icon. AvatarFallback is shown until that probe resolves, and stays shown
permanently if it fails — or if there is no AvatarImage at all, for an initials-only avatar.
AvatarFallback also inherits size/fill/scheme from its parent <avatar> through the AVATAR_REF
token, so a size set once on <avatar> sizes the fallback too — set a prop directly on <AvatarFallback> to
override just that one.
Recipes
Status badge composition
Avatar has no built-in slot for a status dot; it composes with Badge through a relatively-positioned
wrapper — the same pattern the design system uses everywhere a status pill is glued to another element.
import { Component } from "@angular/core";
import { AvatarComponent, AvatarImageComponent, AvatarFallbackComponent, BadgeComponent, CircleCheckIcon } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [AvatarComponent, AvatarImageComponent, AvatarFallbackComponent, BadgeComponent, CircleCheckIcon],
template: `
<div class="relative inline-block">
<avatar size="large">
<AvatarImage src="https://i.pravatar.cc/150?img=5" alt="Jane Doe" />
<AvatarFallback>JD</AvatarFallback>
</avatar>
<badge
variant="icon"
scheme="success"
aria-label="Online"
class="absolute -bottom-0.5 -right-0.5 ring-2 ring-(--bg-neutral-white)"
>
<CircleCheckIcon />
</badge>
</div>
`,
})
export class SampleComponent {}Options
Prop
Type
AvatarImage additionally takes src (required), alt, width, height. AvatarFallback accepts explicit
size/fill/scheme overrides, inherited from the parent <avatar> when omitted.