Skip to content
Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

Avatar

Displays a user avatar with support for images, initials fallback, and accessible labels.

Usage
User name
User name 
<span is="root-avatar" aria-label="User profile">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%236366f1'/%3E%3C/svg%3E" alt="User name" />
</span>

Attributes
Attribute Type Default Description
src string - Image source URL
alt string - Alternative text
size 'small' | 'medium' | 'large' 'medium' Avatar size
aria-label string - Accessible label

Events
Event Detail Description
root-avatar.error { value } Fired when image fails to load

Extends

HTMLElement - use with <span is="root-avatar">.