Avatar

Avatars are used to represent a user or a system entity. They can be used to represent a person, a group of people, or an object.

Appearance

Set the appearance attribute to change the avatar’s appearance.

<script setup lang="ts">
import { VAvatar, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="grid">
    <VAvatar appearance="filled">
      <template #icon><VIcon name="user-line" label="User's avatar" /></template>
    </VAvatar>
    <span>filled (default)</span>

      <VAvatar appearance="subtle">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>subtle</span>

      <VAvatar appearance="duotone">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>duotone</span>

      <VAvatar appearance="outlined">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>outlined</span>
    </div>

</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 8px;
}
</style>

<div class="grid">
  <vwc-avatar appearance="filled">
    <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
  </vwc-avatar>
  <span>filled (default)</span>

  <vwc-avatar appearance="subtle">
    <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
  </vwc-avatar>
  <span>subtle</span>

  <vwc-avatar appearance="duotone">
    <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
  </vwc-avatar>
  <span>duotone</span>

  <vwc-avatar appearance="outlined">
    <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
  </vwc-avatar>
  <span>outlined</span>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 8px;
  }
</style>

Connotation

Set the connotation attribute to set the avatar’s color.
Avatar has accent connotation (default) and cta.

<script setup lang="ts">
import { VAvatar, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="grid">
    <div>
      <VAvatar connotation="accent">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>filled, accent</span>
    </div>
    <div>
      <VAvatar connotation="cta">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>filled, cta</span>
    </div>
    <div>
      <VAvatar connotation="accent" appearance="subtle">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>subtle, accent</span>
    </div>
    <div>
      <VAvatar connotation="cta" appearance="subtle">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>subtle, cta</span>
    </div>
    <div>
      <VAvatar connotation="accent" appearance="duotone">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>duotone, accent</span>
    </div>
    <div>
      <VAvatar connotation="cta" appearance="duotone">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>duotone, cta</span>
    </div>
    <div>
      <VAvatar connotation="accent" appearance="outlined">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>outlined, accent</span>
    </div>
    <div>
      <VAvatar connotation="cta" appearance="outlined">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>outlined, cta</span>
    </div>
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  align-items: center;
  gap: 8px;
}
div span {
  display: inline-block;
  padding-inline: 8px;
}
</style>

<div class="grid">
  <div>
    <vwc-avatar connotation="accent"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>filled, accent</span>
  </div>
  <div>
    <vwc-avatar connotation="cta"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>filled, cta</span>
  </div>
  <div>
    <vwc-avatar connotation="accent" appearance="subtle"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>subtle, accent</span>
  </div>
  <div>
    <vwc-avatar connotation="cta" appearance="subtle"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>subtle, cta</span>
  </div>
  <div>
    <vwc-avatar connotation="accent" appearance="duotone"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>duotone, accent</span>
  </div>
  <div>
    <vwc-avatar connotation="cta" appearance="duotone"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>duotone, cta</span>
  </div>
  <div>
    <vwc-avatar connotation="accent" appearance="outlined"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>outlined, accent</span>
  </div>
  <div>
    <vwc-avatar connotation="cta" appearance="outlined"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>outlined, cta</span>
  </div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 200px 200px;
    align-items: center;
    gap: 8px;
  }
  div span {
    padding-inline: 4px;
  }
</style>

Shape

Set the shape attribute to change the avatar’s edges.

<script setup lang="ts">
import { VAvatar } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="grid">
    <VAvatar shape="rounded"></VAvatar>
    <span>rounded</span>

      <VAvatar shape="pill"></VAvatar>
      <span>pill</span>
    </div>

</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 8px;
}
</style>

<div class="grid"><vwc-avatar shape="rounded"></vwc-avatar><span>rounded</span> <vwc-avatar shape="pill"></vwc-avatar><span>pill</span></div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 8px;
  }
</style>

Icon

Use the icon slot to display an icon from the icon library on the Avatar.

<script setup lang="ts">
import { VAvatar, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAvatar aria-label="avatar for group">
    <template #icon><VIcon name="group-2-solid" label="Group" /></template>
  </VAvatar>
</template>

Initials

Set the initials attribute to set avatar’s initials. This will cause the avatar to present the initials as its content instead of an icon.

Size

Use the size attribute/property to set the avatar’s size.

<script setup lang="ts">
import { VAvatar, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="grid">
    <div>
      <VAvatar size="condensed" initials="JD"></VAvatar>
      <span>condensed (initials)</span>
    </div>
    <div>
      <VAvatar size="condensed" shape="pill">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>condensed (icon)</span>
    </div>
    <div>
      <VAvatar size="normal" initials="JD"></VAvatar>
      <span>normal (initials)</span>
    </div>
    <div>
      <VAvatar size="normal" shape="pill">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>normal (icon)</span>
    </div>
    <div>
      <VAvatar size="expanded" initials="JD"></VAvatar>
      <span>expanded (initials)</span>
    </div>
    <div>
      <VAvatar size="expanded" shape="pill">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
      <span>expanded (icon)</span>
    </div>
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: 200px 200px;
  align-items: center;
  gap: 8px;
}
div span {
  display: inline-block;
  padding-inline: 8px;
}
</style>

<div class="grid">
  <div>
    <vwc-avatar size="condensed" initials="JD"></vwc-avatar>
    <span>condensed (initials)</span>
  </div>
  <div>
    <vwc-avatar size="condensed" shape="pill"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>condensed (icon)</span>
  </div>
  <div>
    <vwc-avatar size="normal" initials="JD"></vwc-avatar>
    <span>normal (initials)</span>
  </div>
  <div>
    <vwc-avatar size="normal" shape="pill"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>normal (icon)</span>
  </div>
  <div>
    <vwc-avatar size="expanded" initials="JD"></vwc-avatar>
    <span>expanded (initials)</span>
  </div>
  <div>
    <vwc-avatar size="expanded" shape="pill"> <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon></vwc-avatar>
    <span>expanded (icon)</span>
  </div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 200px 200px;
    align-items: center;
    gap: 8px;
  }
  div span {
    display: inline-block;
    padding-inline: 4px;
  }
</style>

Clickable Avatar

Avatar as a Link

Use the href attribute to change the avatar wrapper to a link. When doing so, all of the native attributes of <a> are supported, including target.

<script setup lang="ts">
import { VAvatar, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAvatar href="https://api.vivid.vonage.com" target="_blank" aria-label="Link to the Vivid documentation">
    <template #icon><VIcon name="chain-solid" label="Link" /></template>
  </VAvatar>
</template>

Avatar as a Button

Setting the clickable-avatar attribute switches the avatar wrapper to a <button>, allowing you to trigger programmatic actions e.g. using the click event.

<script setup lang="ts">
import { VAvatar, VIcon, VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu aria-label="Menu example" placement="bottom-end">
    <VAvatar slot="anchor" appearance="subtle" aria-label="Open menu" clickable>
      <template #icon><VIcon name="more-vertical-solid" label="Menu" /></template>
    </VAvatar>
    <VMenuItem text="Menu item 1" />
    <VMenuItem text="Menu item 2" />
  </VMenu>
</template>

<vwc-menu aria-label="Menu example" placement="bottom-end">
  <vwc-avatar slot="anchor" appearance="subtle" aria-label="Open menu" clickable>
    <vwc-icon slot="icon" name="more-vertical-solid" label="Menu"></vwc-icon>
  </vwc-avatar>
  <vwc-menu-item text="Menu item 1"></vwc-menu-item>
  <vwc-menu-item text="Menu item 2"></vwc-menu-item>
</vwc-menu>

To ensure accessibility, always add the aria-level attribute when using the href or clickable attributes.