Holo Avatar

The <holo-avatar> component displays a user or entity’s image. When src is omitted, it falls back to rendering initials, or a generic decorative person icon if neither is provided.

When to use

Use it for:

• Representing a person or entity beside their name, in comments, lists and headers.
• Showing initials as a fallback when no image is available.

Don’t use it for:

• Standalone identification. Always show the name as text nearby.
• Status or counts. Use Badge or Tag.
• Uploading or changing a profile picture. Avatar is display only and not interactive.

Live Previews

With an image

<holo-avatar src="https://example.com/ada.png" alt="Portrait of Ada B." size="md"></holo-avatar>

Initials fallback

<holo-avatar initials="AB" size="md"></holo-avatar>

Generic icon fallback

<!-- no src or initials: renders a decorative, aria-hidden icon -->
<holo-avatar></holo-avatar>

Accessibility

The avatar is not interactive. With src, the host has role="img" and renders an <img> whose alt comes from the alt prop (empty when omitted). With only initials, the host has role="img" and aria-label set to the initials. With neither, no role is set and the placeholder icon is aria-hidden, so assistive technology ignores it.

You provide:

• A descriptive alt whenever you pass src, or an empty alt when the person’s name is already shown beside the avatar.
• The full name as visible text near initials. Initials alone (for example “AB”) are announced as letters, not as a name.
• Visible text for any meaning the image carries. Do not rely on the picture alone.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-avatar';

Properties

Property	Attribute	Type	Default	Description
alt	alt	string	—	Accessible text describing the image. Required when src is set.
initials	initials	string	—	Initials to render when no image is available.
size	size	"lg" | "md" | "sm"	'md'	The size of the avatar.
src	src	string	—	The image URL to display. If omitted, initials (or a generic icon) are rendered instead.

CSS custom properties

Property	Description
--holo-avatar-bg	Background color behind initials or the placeholder icon.
--holo-avatar-color	Color of the initials and placeholder icon.
--holo-avatar-radius	Corner radius of the avatar.
--holo-avatar-size-lg	Width and height of the lg size.
--holo-avatar-size-md	Width and height of the md size.
--holo-avatar-size-sm	Width and height of the sm size.