Avatar

<oblyx-avatar> renders a person's picture, initials, or a generic fallback icon in a fixed-size circle. It composes with an optional <oblyx-avatar-status-dot> corner child and, for a set of people, with <oblyx-avatar-group>.

Basic avatars

Two named avatars fall back to initials with no src set, and a third with no name falls back to a generic icon.

HTML

Kotlin

<oblyx-avatar name="Priya Shah"></oblyx-avatar>
<oblyx-avatar name="Marcus Webb"></oblyx-avatar>
<oblyx-avatar></oblyx-avatar>

oblyxAvatar(name = "Priya Shah")
oblyxAvatar(name = "Marcus Webb")
oblyxAvatar()

Fallback chain

src is tried first, then fallback-src, then initials derived from name, then a generic person icon, in that order, whenever the current step fails to load. The example below points both src and fallback-src at images that do not exist, so both fail to load in this doc page and each avatar falls through to its initials.

Both images fail, falling back to initials

HTML

Kotlin

<oblyx-avatar src="/does-not-exist.jpg" name="Priya Shah"></oblyx-avatar>
<oblyx-avatar src="/does-not-exist.jpg" fallback-src="/also-missing.jpg" name="Marcus Webb"></oblyx-avatar>

oblyxAvatar(src = "/does-not-exist.jpg", name = "Priya Shah")
oblyxAvatar(src = "/does-not-exist.jpg", fallbackSrc = "/also-missing.jpg", name = "Marcus Webb")

Size

Five diameter tiers: xsm, sm, md (the default), lg, and xl. Size also cascades to a nested status dot, sized to match.

Avatar sizes

HTML

Kotlin

<oblyx-avatar name="Priya Shah" size="xsm"></oblyx-avatar>
<oblyx-avatar name="Priya Shah" size="sm"></oblyx-avatar>
<oblyx-avatar name="Priya Shah" size="md"></oblyx-avatar>
<oblyx-avatar name="Priya Shah" size="lg"></oblyx-avatar>
<oblyx-avatar name="Priya Shah" size="xl"></oblyx-avatar>

oblyxAvatar(name = "Priya Shah", size = OblyxAvatarSize.XSM)
oblyxAvatar(name = "Priya Shah", size = OblyxAvatarSize.SM)
oblyxAvatar(name = "Priya Shah", size = OblyxAvatarSize.MD)
oblyxAvatar(name = "Priya Shah", size = OblyxAvatarSize.LG)
oblyxAvatar(name = "Priya Shah", size = OblyxAvatarSize.XL)

Link avatars

href renders a real <a> instead of a static element. target and rel are only meaningful together with href.

Linked avatar

HTML

Kotlin

<oblyx-avatar name="Priya Shah" href="/team/priya-shah"></oblyx-avatar>

oblyxAvatar(name = "Priya Shah", href = "/team/priya-shah")

Status dot

<oblyx-avatar-status-dot> draws one of three shape glyphs, a filled dot, a hollow ring, or a dot with a minus bar, never color alone. Its accessibility model differs depending on where it sits, and that difference is deliberate rather than an oversight. A named avatar already renders with role="img" and an accessible name built from that name; ARIA prunes the descendant semantics of an element with role="img", so a status dot nested inside one can never announce itself separately no matter what label it carries. Instead, its label folds directly into the avatar's own accessible name, becoming, for example, "Priya Shah, Online", and the dot itself stays silent to assistive technology.

Status dot nested in an avatar

HTML

Kotlin

<oblyx-avatar name="Priya Shah">
  <oblyx-avatar-status-dot variant="success" label="Online"></oblyx-avatar-status-dot>
</oblyx-avatar>
<oblyx-avatar name="Marcus Webb">
  <oblyx-avatar-status-dot variant="neutral" label="Away"></oblyx-avatar-status-dot>
</oblyx-avatar>

oblyxAvatar(name = "Priya Shah") {
  oblyxAvatarStatusDot(variant = OblyxAvatarStatusDotVariant.SUCCESS, label = "Online")
}
oblyxAvatar(name = "Marcus Webb") {
  oblyxAvatarStatusDot(variant = OblyxAvatarStatusDotVariant.NEUTRAL, label = "Away")
}

Used standalone, with no <oblyx-avatar> ancestor to fold into, the same element exposes its own accessible name directly: role="img" with aria-label set from label, which is required in this case.

Standalone status dot

HTML

Kotlin

<oblyx-avatar-status-dot variant="error" label="Do not disturb"></oblyx-avatar-status-dot>

oblyxAvatarStatusDot(variant = OblyxAvatarStatusDotVariant.ERROR, label = "Do not disturb")

Avatar group

<oblyx-avatar-group> is purely compositional: children are plain <oblyx-avatar> elements the caller orders and slices, plus an optional <oblyx-avatar-group-overflow> "+N" indicator for the avatars the group does not render. The group's own size cascades to every child avatar through a plain CSS attribute selector, with no JavaScript reaching into a child element at all, overriding whatever size each avatar carries on its own. Because the cascade is CSS, a consumer can restyle it, for example to change the overlap amount, with an ordinary stylesheet rule targeting the same selector.

Avatar group with overflow

HTML

Kotlin

<oblyx-avatar-group>
  <oblyx-avatar name="Priya Shah"></oblyx-avatar>
  <oblyx-avatar name="Marcus Webb"></oblyx-avatar>
  <oblyx-avatar name="Jordan Lee"></oblyx-avatar>
  <oblyx-avatar-group-overflow count="4"></oblyx-avatar-group-overflow>
</oblyx-avatar-group>

oblyxAvatarGroup {
  oblyxAvatar(name = "Priya Shah")
  oblyxAvatar(name = "Marcus Webb")
  oblyxAvatar(name = "Jordan Lee")
  oblyxAvatarGroupOverflow(count = 4)
}

When a group contains at least one interactive child, a linked avatar or an interactive overflow indicator, the group becomes a single Tab stop with arrow-key navigation between those children, resolved fresh from the DOM rather than cached. interactive on <oblyx-avatar-group-overflow> renders a real <button> instead of a static, non-focusable indicator, for a consumer that attaches its own click listener to open a full member list.

Linked avatars with an interactive overflow

Tab into the group, then use the arrow keys to move between avatars.

HTML

Kotlin

<oblyx-avatar-group size="lg">
  <oblyx-avatar name="Priya Shah" href="/team/priya-shah"></oblyx-avatar>
  <oblyx-avatar name="Marcus Webb" href="/team/marcus-webb"></oblyx-avatar>
  <oblyx-avatar name="Jordan Lee" href="/team/jordan-lee"></oblyx-avatar>
  <oblyx-avatar-group-overflow count="6" interactive></oblyx-avatar-group-overflow>
</oblyx-avatar-group>

oblyxAvatarGroup(size = OblyxAvatarSize.LG) {
  oblyxAvatar(name = "Priya Shah", href = "/team/priya-shah")
  oblyxAvatar(name = "Marcus Webb", href = "/team/marcus-webb")
  oblyxAvatar(name = "Jordan Lee", href = "/team/jordan-lee")
  oblyxAvatarGroupOverflow(count = 6, interactive = true)
}

Reference

`<oblyx-avatar>`

Attribute	Type	Default	Description
`src`	`string \| undefined`	`undefined`	Primary image source. Falls back to `fallback-src`, then initials, then a generic icon, in that order, whenever this fails to load.
`fallback-src`	`string \| undefined`	`undefined`	Second image attempted after `src` fails to load.
`name`	`string \| undefined`	`undefined`	The person's name. Drives the initials fallback and, unless `alt` is set, the accessible name and tooltip text.
`alt`	`string \| undefined`	`undefined`	Accessible-name override. Wins over `name` when both are set.
`size`	`xsmsmmdlgxl`	`md`	The avatar's diameter tier. Also cascades to a corner status dot's size and, when this avatar sits inside an `<oblyx-avatar-group>`, is overridden by the group's own `size`.
`tooltip`	`string \| undefined`	`undefined`	Native `title` text shown on hover. The literal string `"false"` disables the tooltip entirely; any other string is used verbatim; omitting the attribute (or setting it to an empty string) uses the resolved accessible name.
`href`	`string \| undefined`	`undefined`	Renders a real `<a>` instead of a static element. Reflected so an `<oblyx-avatar-group>` can detect interactive children with a plain `oblyx-avatar[href]` selector, with no JavaScript reaching into this element to ask.
`target`	`string \| undefined`	`undefined`	HTML `target`, only meaningful with `href`.
`rel`	`string \| undefined`	`undefined`	HTML `rel`, only meaningful with `href`.

`<oblyx-avatar-status-dot>`

Attribute	Type	Default	Description
`variant`	`successneutralerror`	–	Which shape glyph to draw: a filled dot, a hollow ring, or a dot with a minus bar. Status is never conveyed by color alone.
`label`	`string \| undefined`	`undefined`	Accessible name, for example "Online". Required when this dot is used standalone; when nested inside an `<oblyx-avatar>`, this text is read into the avatar's own accessible name instead, and this element stays silent to assistive technology. Reflected so the ancestor avatar can read it with a plain attribute lookup, with no property access needed before this element has upgraded.

`<oblyx-avatar-group>`

Attribute	Type	Default	Description
`size`	`xsmsmmdlgxl`	`md`	Size tier cascaded to every child `<oblyx-avatar>` via CSS, overriding each avatar's own `size`.

`<oblyx-avatar-group-overflow>`

Attribute	Type	Default	Description
`count`	`number`	`0`	How many avatars this indicator represents. Drives both the default "+N" content and the computed accessible name. Required.
`interactive`	`boolean`	`false`	Renders a real `<button>` instead of a static, non-focusable element. A consumer attaches their own `click` listener to open a full list of avatars.