IAvatar ​

A person or an organisation, at a glance, with initials when there is no image.

<IAvatar name="Ana Ruiz" />
<IAvatar name="Bo Lindqvist" />
<IAvatar name="Cai Wen" shape="square" />

Initials ​

name is enough: the first letters of the first and last words are used, so "Ana María Ruiz Vega" gives AV. A single name gives one letter. Pass initials to override.

<IAvatar name="Ana Ruiz" />              <!-- AR -->
<IAvatar name="Ana María Ruiz Vega" />   <!-- AV -->
<IAvatar name="Prince" />                <!-- P  -->
<IAvatar name="Ana Ruiz" initials="AZ" />

With an image ​

The initials show while the image loads and stay if it fails. Set delay-ms to hold them back briefly, so a fast connection goes straight to the photo.

<IAvatar src="/ana.jpg" name="Ana Ruiz" :delay-ms="400" />

alt defaults to empty, since an avatar usually sits beside the same person's name. Give it an alt when the image is the only mention of who this is.

Sizes and shapes ​

Circle for a person, square for a company or a project.

<IAvatar name="Ana Ruiz" size="xs" />
<IAvatar name="Ana Ruiz" size="sm" />
<IAvatar name="Ana Ruiz" size="md" />
<IAvatar name="Ana Ruiz" size="lg" />
<IAvatar name="Ana Ruiz" size="xl" />

Status ​

A presence dot in the corner, ringed in the page background.

<IAvatar name="Ana Ruiz" status="online" />
<IAvatar name="Bo Lindqvist" status="busy" status-label="In a meeting" />
<IAvatar name="Cai Wen" status="away" />
<IAvatar name="Dara Okoye" status="offline" />

The dot carries a name, defaulting to the status word. Pass status-label for something more specific.

Props ​

Slots ​

See IAvatarGroup for stacking several of them together.