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
Empty Fallback
Empty fallback
API
oas-avatar
| Attribute | Description | Type | Default |
|---|---|---|---|
alt | Alternative text for the image | — | — |
size | Avatar size (px) | string | 32 |
src | Image URL; renders an image avatar when present | string | — |
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.