Avatar

Display an image that represents a resource or a group of resources.

Usage

<template>
  <s-avatar src="https://avatars.githubusercontent.com/u/2556185?v=4" alt="Avatar" />
</template>

Size

Use the size prop to change the size of the Avatar.

<template>
  <s-avatar src="https://avatars.githubusercontent.com/u/2556185?v=4" size="sm" alt="Avatar" />
</template>

Chip

Use the chip-color, chip-text and chip-position props to display a chip on the Avatar.

<template>
  <s-avatar src="https://avatars.githubusercontent.com/u/2556185?v=4" chip-color="primary" chip-text="" chip-position="top-right" size="sm" />
</template>

Placeholder

If there is an error loading the src of the avatar or src is null a background placeholder will be displayed, customizable in ui.avatar.background.

If there's an alt prop initials will be displayed on top of the background, customizable in ui.avatar.placeholder.

JD

<template>
  <s-avatar alt="John Doe" size="sm" />
</template>

Group

To stack avatars as a group, use the AvatarGroup component.

• To limit the amount of avatars to show, use the max prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
• To size all the avatars equally, pass the size prop
• To adjust the spacing or the ring between avatars, customize with ui.avatarGroup.margin or ui.avatarGroup.ring

+1

<template>
  <s-avatar-group size="sm" :max="2">
    <s-avatar src="https://avatars.githubusercontent.com/u/2556185?v=4" alt="ManukMinasyan" />
    <s-avatar src="https://avatars.githubusercontent.com/u/77129709?v=4" alt="Ilyapashayan20" />
    <s-avatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
  </s-avatar-group>
</template>