Message Avatar

Core component

<loquix-message-avatar> represents a chat participant with an image, derived initials, or the built-in assistant icon.

loquix-message-avataraccessiblestate-aware

Preview

Avatar states Live component

Usage

import '@loquix/core/define/define-message-avatar';

<loquix-message-avatar
  variant="initials"
  name="Ada Lovelace"
  size="md"
></loquix-message-avatar>

<loquix-message-avatar
  variant="icon"
  state="thinking"
></loquix-message-avatar>

Rendering priority

The component chooses its visible content in this order:

1. src renders an image.
2. name derives one or two initials.
3. Otherwise the built-in assistant icon is shown.

Properties

Property	Attribute	Type	Default	Description
src	src	string	—	Image URL.
name	name	string	—	Accessible name and source for initials.
state	state	'idle' | 'thinking' | 'streaming' | 'error'	'idle'	Participant activity state. Thinking and streaming animate the pulse ring.
size	size	'xs' | 'sm' | 'md' | 'lg'	'md'	Avatar size preset.
variant	variant	'icon' | 'image' | 'initials' | 'animated'	'icon'	Visual variant hint. Actual content follows the priority above.

Tip

Set name even when using src. It becomes the image alternative text and keeps the avatar understandable if the image cannot be displayed.

CSS parts

Part	Purpose
container	Outer avatar circle.
image	Image element when src is present.
initials	Initials text when name is present without src.

CSS custom properties

Variable	Purpose
--loquix-avatar-bg	Avatar background.
--loquix-avatar-color	Foreground and icon color.
--loquix-avatar-pulse-color	Activity ring color.
--loquix-avatar-size-sm	Small preset size.
--loquix-avatar-size-md	Medium preset size.
--loquix-avatar-size-lg	Large preset size.