Profile Chip
import "@taprootio/espalier/avatar/profile-chip";
<esp-profile-chip>
Inline profile summary that composes esp-avatar with a display
name and optional secondary text.
esp-profile-chip renders inline so it can sit inside buttons,
menus, and navigation rows without adding its own interactive
behavior.
The composed avatar inherits --esp-avatar-border-radius, so set
that property on esp-profile-chip to use the same avatar shape hook
as a standalone esp-avatar.
Attributes
<esp-profile-chip> has the following attributes:
src
src has a default value of "".
Image URL passed to the internal avatar.
name
name has a default value of "".
Display name shown beside the avatar and passed to the avatar for accessibility and initials fallback.
size
size has a default value of undefined.
Size preset passed to the internal avatar.
secondary
secondary has a default value of "".
Optional secondary line such as a role, handle, or email.
presence
presence has a default value of undefined.
Optional presence state passed to the internal avatar.
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-profile-chip> has the following methods:
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-profile-chip> has the following CSS properties:
--esp-avatar-border-radius
Border radius of the image and initials fallback. Defaults to 50%.
--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).