UserAvatar

A UserAvatar is a round picture of a user or a character. Without a picture it shows the initials of the name. The name Avatar is not used, because UnityEngine.Avatar has it.

Avatars with initials, a large avatar with a green status dot, a square avatar and an avatar with an image

How to add an avatar:

<tb:UserAvatar display-name="Ada Lovelace" />
<tb:UserAvatar name="player" display-name="Grace Hopper" size="48">
    <tb:Badge dot="true" corner="true" tone="Success" />
</tb:UserAvatar>

var avatar = root.Q<UserAvatar>("player");
avatar.Image = Background.FromTexture2D(portrait); // or FromSprite

Member	Description
`DisplayName` (`display-name`)	The name. Its initials show when there is no image, and it is the tooltip.
`Image` (`image`)	The picture: a texture, a sprite, a render texture or a vector image. It fills the avatar and hides the initials.
`Size` (`size`)	The width and height in pixels. The initials take 40% of it as their font size. 0 (the default) uses the USS size, 32 px.
`Square` (`square`)	A square with round corners instead of a circle.
`UserAvatar.InitialsOf(name)`	The initials that the control shows: the first letter of the first word and of the last word, in upper case. "?" for an empty name.

Children of the avatar show on top of the picture. The picture itself is an inner element, so a corner badge is not clipped.
The background of the initials is the accent color of the theme.

Tips:

In UXML, set image to a texture or a sprite of the project with the UI Builder, or use image="project://database/Assets/Portraits/Ada.png".
For a row of users, set the same size on each avatar and give the row flex-direction: row.
For a different color for each user, set style.backgroundColor on avatar.Q(className: UserAvatar.IMAGE_CLASS).

Styling

Class	Element
`tb-avatar`	The control: 32 px wide and high. `Size` sets an inline width, height and font size.
`tb-avatar__image`	The inner element with the picture or the initials: a circle (`border-radius: 50%`) on `--tb-color-accent`. The picture is its background, with `scale-and-crop`.
`tb-avatar__initials`	The bold initials, in `--tb-color-accent-text`. Hidden while the avatar has an image.
`tb-avatar--square`	An avatar with `Square` on. The inner element takes `--tb-radius-md`.

.tb-avatar__image { background-color: var(--tb-color-surface-alt); border-width: 2px; border-color: var(--tb-color-accent); }
.tb-avatar__initials { color: var(--tb-color-text); }

#UserAvatar

#Styling

UserAvatar

Styling