Avatar

Display a user or entity avatar (image, initials, or icon) with optional presence dot and badge overlay.

HTML tag: c-e247d101dce6f42e8bd2be1f0c8cbbe49

When to use

• user or entity profile image
• initials fallback when no photo
• presence or count badge on a person/entity

Props

Prop	Type	Default	Description
src	string
initials	string
icon	string
size	string	md
presence	string	none
interactive	boolean
alt	string
label	string
shape	string	circle
fit	string	cover
badge	string
disabled	boolean
loading	string	lazy
fallback_strategy	string	initials
seed_color	string
aria_label	string
density	string	comfortable
presence_position	string	br
presence_variant	string	dot
badge_position	string	tr
badge_variant	string	pill
badge_anchor	string	inside

Rules

• Prefer .src for photo; use .initials or .icon when no image.
• Set .aria_label when interactive or image-only.
• Use .size (xs–lg) and .shape (circle | rounded | square) for layout fit.
• .presence and .badge are decorative indicators, not buttons.

Methods

Signature	Description
refresh()

What to avoid

Do not use ab-avatar for generic icons without a person/entity context — use ab-icon. Do not rely on badge text for critical status — use ab-status-chip for workflow status.

Example

<c-e247d101dce6f42e8bd2be1f0c8cbbe49 .src=${user.photo} .initials=${user.initials} .size=${'md'} .presence=${'online'} .interactive=${true} @avatar-click=${openProfile}></c-e247d101dce6f42e8bd2be1f0c8cbbe49>