Skip to main content

dyte-avatar

Avatar component which renders a participant's image or their initials.

<dyte-avatar class="dyte-el" size="sm"></dyte-avatar>
<dyte-avatar class="" size="md"></dyte-avatar>
<dyte-avatar class="dyte-el" size="lg"></dyte-avatar>

<script>
  const elements = document.getElementsByClassName('dyte-el');
  for (const el of elements) {
    el.participant = meeting.self;
  }
</script>

Props​

iconPack

Icon pack

Default
defaultIconPack

participant

Participant object

size

Size

Type
"lg" | "md" | "sm" | "xl"

t

Language

Default
useLanguage()

variant

Avatar type

Default
'circular'
Type
"circular" | "hexagon" | "square"