Avatar
Displays a user or object avatar, supporting both text-placeholder and image forms.
Basic Usage
Text avatars
A text avatar renders the first character of its content; with no content at all, it shows a ? placeholder.
Sizes
Size variants
Image Avatars
Image avatars
Avatar Groups
Avatar group
Multiple oas-avatar elements wrapped in oas-avatar-group are laid out left-to-right with overlapping.
Max display count
When max is set, the overflow is hidden and a +N count badge is shown at the end.
Unified Size
size sets the size of all avatars in the group (px) so it does not need to be set per avatar; combined with max, the +N count badge adapts its size accordingly.
Unified size size
Badge Overlay
badge overlays a badge on the avatar's top-right corner (text or boolean); the boolean form (no value) shows a small dot; badge-dot forces the dot variant; badge-color switches colors; badge-placement moves the badge to the bottom-right.
Text badges
Dot badges
Placement and image avatars
Load-Failure Fallback
When the image fails to load, the avatar automatically falls back to a placeholder: first the fallback named-slot content, then the first character of its content, and finally ?.
Fallback to first character
Custom fallback slot
Empty Fallback
Empty fallback
API
oas-avatar
| Attribute | Description | Type | Default |
|---|---|---|---|
alt | Alternative text for the image | — | — |
badge | Badge text overlaid on the avatar's top-right corner; boolean form (no value) shows a dot | string | — |
badge-color | Badge color: primary/success/warning/danger | string | danger |
badge-dot | Small dot badge variant (no text) | boolean | — |
badge-placement | Badge placement: top-right (default) / bottom-right | string | top-right |
size | Avatar size (px) | string | 32 |
src | Image URL; renders an image avatar when present | string | — |
| Name | Description |
|---|---|
fallback | Custom placeholder content when the image fails to load (or the avatar has no content) |
oas-avatar-group
| Attribute | Description | Type | Default |
|---|---|---|---|
max | Max number of avatars shown; overflow shows a +N count badge | string | — |
size | Unified avatar size (px); the count badge adapts | string | — |
| Name | Description |
|---|---|
| default | — |
Note:
altis read on first render and is not in the observed attribute list; dynamic changes require a manual re-render.