SusAvatar

User / character face — initials, image URL, size, shape, optional status dot.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Image	Prop<string>	""	v-model
Text	Prop<string>	""	v-model
Size	Prop<string>	"default"	v-model
Rounded	Prop<string>	"circle"	v-model
Color	Prop<string>	"primary"	v-model
Status	Prop<string>	""	v-model

Slots

No slots.

Events

No public events.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-avatar
• sus-avatar__image
• sus-avatar__status
• sus-avatar__status--away
• sus-avatar__status--busy
• sus-avatar__status--offline
• sus-avatar__status--online
• sus-avatar__surface
• sus-avatar__text
• sus-avatar--danger
• sus-avatar--default
• sus-avatar--has-status
• sus-avatar--info
• sus-avatar--large
• sus-avatar--primary
• sus-avatar--rounded-circle
• sus-avatar--rounded-lg
• sus-avatar--rounded-md
• sus-avatar--rounded-pill
• sus-avatar--rounded-sm
• sus-avatar--secondary
• sus-avatar--small
• sus-avatar--success
• sus-avatar--warning
• sus-avatar--x-large
• sus-avatar--x-small

Usage

<sus:SusAvatar Text="AB"
               Size="large"
               Color="secondary"
               Rounded="circle"
               Status="online" />

var avatar = new SusAvatar();
avatar.Text.Value = "AB";
avatar.Size.Value = "large";
avatar.Color.Value = "secondary";
avatar.Rounded.Value = "circle";
avatar.Status.Value = "online";
// Or: avatar.Image.Value = "url-or-resource";

Size

x-small · small · default · large · x-large

Status

online · offline · away · busy · (empty = no dot)