Avatar

Preview Code

375 768 Full

Open

html

<span class="aparte-avatar aparte-avatar--sm">AP</span>
<span class="aparte-avatar">JD</span>
<span class="aparte-avatar aparte-avatar--lg aparte-avatar--square">MK</span>
<span class="aparte-avatar-group">
  <span class="aparte-avatar">AP</span>
  <span class="aparte-avatar">JD</span>
  <span class="aparte-avatar">+3</span>
</span>

.aparte-avatar stands for a person: their picture (.aparte-avatar__image), or their initials when there is none. It is the same object as a message’s avatar, so a size set here resizes the chat’s avatars too. --xs to --xl size it, --circle and --square shape it, and .aparte-avatar-group overlaps several, with a +3 for the rest.

The corner, the initials and the overlap are fractions of the size, so they stay in proportion whatever size you pick.

Customize

Variable	Default	Note
--aparte-avatar-size	32px	Avatars
--aparte-avatar-initials-ratio	0.34
--aparte-avatar-radius-ratio	0.28
--aparte-avatar-overlap-ratio	0.28
--aparte-avatar-image-user	none
--aparte-avatar-image-assistant	none
--aparte-avatar-image-size	90%
--aparte-avatar-size-xs	20px
--aparte-avatar-size-sm	24px
--aparte-avatar-size-lg	40px
--aparte-avatar-size-xl	56px
--aparte-avatar-fallback-bg	var(--aparte-surface-3)
--aparte-avatar-fallback-color	var(--aparte-text)
--aparte-avatar-group-ring-width	calc(var(--aparte-border-width) * 2)
--aparte-avatar-group-ring-color	var(--aparte-surface-1)
--aparte-avatar-error-ring	0 0 0 2px var(--aparte-error-solid)	The error ring on an avatar.
--aparte-avatar-bg-user	var(--aparte-primary)
--aparte-avatar-text-user	var(--aparte-text-inverse)
--aparte-avatar-bg-assistant	var(--aparte-surface-3)
--aparte-avatar-text-assistant	var(--aparte-text)

To put avatars on the chat’s messages, see setAvatarProvider() on the Message page.

Classes

.aparte-avatar · .aparte-avatar--circle · .aparte-avatar--lg · .aparte-avatar--sm · .aparte-avatar--square · .aparte-avatar--xl · .aparte-avatar--xs · .aparte-avatar-group · .aparte-avatar__image

Accessibility

• A picture needs an alt that names the person; initials alone may need an aria-label with the full name.
• In a group, the +3 should say what it counts (“3 more people”).

Related

• Message — avatars beside the conversation.
• Thumbnail — the same tile for a file instead of a person.