Varendo

Avatar

Display optional identity image; fallback initials and privacy-safe alt policy.

FamilyfoundationLicenseApache-2.0
StandaloneAvailable

Use the web element directly without the semantic runtime.

Semantic bindingAvailable

A registered presentation adapter can bind this component to host-owned meaning and state.

Automatic adaptationNo standard recipe

The standard recipe resolver does not select this component automatically.

Import and live example

One named person without a remote image, exercising initials fallback.

Interactive preview requires JavaScript.

View the complete example source
import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAvatarElement,
  AeliqoBadgeElement,
  AeliqoButtonElement,
  AeliqoGridElement,
  AeliqoHeadingElement,
  AeliqoIconButtonElement,
  AeliqoLinkElement,
  AeliqoScrollAreaElement,
  AeliqoSeparatorElement,
  AeliqoSplitPaneElement,
  AeliqoStackElement,
  AeliqoSurfaceElement,
  AeliqoTextElement,
} from "@varendo/web/foundation";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoAvatarElement>("aeliqo-avatar", root);
		element.name = "Ada Lovelace";
		element.alt = "Ada Lovelace";
		element.size = "medium";
	}))(root);

Purpose

Shows one person's image, with initials as fallback when the image is missing or fails. Set alt on meaningful images; mark it decorative only when nearby text already names the person.

When to use it

When to use a different component

Properties and defaults

Use decorative only when adjacent content already supplies the person identity.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
nameProvides the stable form or action name used by the host to identify this control.string''
srcProvides an application-approved image source for the avatar.string''
altProvides alternative text for a meaningful image. Leave it empty only when the image is decorative.string''
sizeSelects the component size from its bounded visual variants.AeliqoAvatarSize'medium'
decorativeMarks the visual as decorative so it is removed from the accessibility tree.booleanfalse

Events

States and failure handling

Relevant states:

Expected result: The avatar exposes an accessible name or initials fallback without requiring a network request.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Avatar uses its selected size. Pair it with wrapping identity text when initials alone do not fit the narrow layout.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoAvatarElement extends AeliqoFoundationElement {
    static readonly properties: {
        name: {
            type: StringConstructor;
        };
        src: {
            type: StringConstructor;
        };
        alt: {
            type: StringConstructor;
        };
        size: {
            type: StringConstructor;
        };
        decorative: {
            type: BooleanConstructor;
            reflect: boolean;
        };
    };
    name: string;
    src: string;
    alt: string;
    size: AeliqoAvatarSize;
    decorative: boolean;
    private imageFailed;
    protected willUpdate(changed: Map<string, unknown>): void;
    protected render(): import("lit").TemplateResult<1>;
    private readonly handleImageError;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.