Avatar

Show user's avatar, using name or image

Usage

Using image

preview

<template>
  <p-avatar src="https://picsum.photos/id/50/50" />
</template>

Using alias

preview

<template>
  <p-avatar variant="alias" name="Tarjono Smith" />
</template>

Using icon

preview

<template>
  <p-avatar>
    <IconUser />
  </p-avatar>
</template>

<script setup>
  import IconUser from '@privyid/persona-icon/vue/profile/20.vue'
</script>

Square round

Avatar also comes in square-round type variant. Just using square prop to enable this type variant.

Use square-round type variant of avatars only to represent an entity, e.g. group chat avatar. Avatar square-round can't be used to represent a user.

preview

<template>
  <p-avatar square>
    <IconChatGroup />
  </p-avatar>
</template>

Sizing

There are 5 available size variant: xs, sm, md, lg, xl. The default is md.

preview

<template>
  <p-avatar src="https://picsum.photos/id/24/24" size="xs" />
  <p-avatar src="https://picsum.photos/id/32/32" size="sm" />
  <p-avatar src="https://picsum.photos/id/40/40" size="md" />
  <p-avatar src="https://picsum.photos/id/56/56" size="lg" />
  <p-avatar src="https://picsum.photos/id/96/96" size="xl" />

  <p-avatar src="https://picsum.photos/id/96/96" size="xl" square />
  <p-avatar src="https://picsum.photos/id/56/56" size="lg" square />
  <p-avatar src="https://picsum.photos/id/40/40" size="md" square />
  <p-avatar src="https://picsum.photos/id/32/32" size="sm" square />
  <p-avatar src="https://picsum.photos/id/24/24" size="xs" square />
</template>

Avatar Group

Avatar can be grouped using <p-avatar-group>. Group sets used to display a collection of avatars with size xsmall only.

preview

<template>
  <p-avatar-group>
    <p-avatar />
    <p-avatar />
    <p-avatar />
    <p-avatar />
    <p-avatar />
  </p-avatar-group>
</template>

Limiting items

Set maximum avatar inside avatar group using prop length, if items more than the length, it truncated automatically. default is 5

+3

preview

<template>
  <p-avatar-group length="3">
    <p-avatar />
    <p-avatar />
    <p-avatar />
    <p-avatar />
    <p-avatar />
  </p-avatar-group>
</template>

Variant

Avatar has 2 style variant: image and alias

preview

<template>
  <p-avatar variant="image" src="https://picsum.photos/id/40/40" />
  <p-avatar variant="alias" name="Tarjono Smith" />
</template>

Auto-detect variant

If prop variant not set, it will detect the variant with some caveats:

• if src is provided, it will use image
• if name is provided, it will use alias
• Otherwise, it will use image

<template>
  <!-- This will use `image` -->
  <p-avatar src="https://picsum.photos/id/40/40" />
  <!-- This will use `alias` -->
  <p-avatar name="Tarjono Smith" />
  <!-- This will use `image` -->
  <p-avatar />
</template>

Result:

preview

API

Props

Props	Type	Default	Description
variant	String	image	Avatar type variant, valid value: avatar, alias. default value is determined by some caveats, see this
src	String	-	Image URL, required if using variant image
fallbackSrc	String	-	Fallback image url for broken link
name	String	-	Avatar name which would be generated into alias, required if using variant alias
size	String	md	Avatar size, valid value: xs, sm, md, lg, xl
imgClass	String	-	Additional class for image element

Slots

Name	Description
default	Content to replace default avatar image element

Events

Name	Arguments	Description
imgloaded	Image URL	Event when image loaded
imgerror	Error	Event when image failed to load