Avatar
import "@taprootio/espalier/avatar";
<esp-avatar>
User or persona avatar with image, initials fallback, and optional presence indicator.
Size presets can be combined with a border-radius override when an application needs rounded-square avatars instead of circles:
Attributes
<esp-avatar> has the following attributes:
src
src has a default value of "".
Image URL for the avatar.
name
name has a default value of "".
Display name used for image alt text and initials fallback.
size
size has a default value of undefined.
Size preset for the avatar.
presence
presence has a default value of undefined.
Optional presence state. When omitted, no presence indicator is rendered.
loading
loading has a default value of undefined.
Native image loading behavior. Defaults to lazy for list usage.
crossorigin
crossorigin has a default value of undefined.
Optional crossorigin value forwarded to the internal image.
referrerpolicy
referrerpolicy has a default value of undefined.
Referrer policy forwarded to the internal image. Defaults to
no-referrer.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-avatar> has the following methods:
retryImage
Clear a failed image state and attempt to render the current src
again. Useful when retrying the same URL after a temporary network
failure.
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
CSS Properties
<esp-avatar> has the following CSS properties:
--esp-avatar-border-radius
Border radius of the image and initials fallback. Defaults to 50%.
--esp-avatar-size
Width and height of the avatar. Automatically set by the size attribute.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).