Elements
Avatar
A user or entity image with initials/icon fallback, presence status, and ring/shape options.
<UiAvatar />Size
size is the sze of the Avatar.
Src
src is the image URL. It falls back to the initials built from firstName and lastName, and then to a generic user icon, so a broken image never leaves an empty circle.
A broken src silently falls back to initials (from firstName/lastName), then to a generic user icon if neither is set — there's no error state shown to the user.
First name
firstName supplies the first letter of the fallback initials, and is part of the image's alt text — so it's worth passing even when you have a src.
Last name
lastName supplies the second initial. With both names set the fallback reads as a proper monogram rather than a lone letter.
Status
status puts a presence dot on the avatar — online, away, busy, do not disturb or offline. It's positioned to survive both shapes, so it doesn't need moving when shape changes.
Ring
ring is the ring color displayed around the Avatar.
Shape
shape switches between the circle and a rounded square. The square scales its corner radius to size, so a large one isn't proportionally sharper than a small one.
shape="square" scales its corner radius with size automatically; you don't need to set a separate rounding prop.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
stringstringstring"online" | "offline" | "away" | "dnd" | "busy""primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral""circle" | "square"'circle'