Skip to content

Avatar

Show user's avatar, using name or image

Usage

Using image

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

Using alias

Avatar Image
preview
vue
<template>
  <p-avatar variant="alias" name="Tarjono Smith" />
</template>

Using icon

preview
vue
<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.

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

Sizing

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

Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image
preview
vue
<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.

Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image
preview
vue
<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

Avatar Image
Avatar Image
+3
preview
vue
<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

Avatar Image
Avatar Image
preview
vue
<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
vue
<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:

Avatar Image
Avatar Image
Avatar Image
preview

API

Props

PropsTypeDefaultDescription
variantStringimageAvatar type variant, valid value: avatar, alias. default value is determined by some caveats, see this
srcString-Image URL, required if using variant image
fallbackSrcString-Fallback image url for broken link
nameString-Avatar name which would be generated into alias, required if using variant alias
sizeStringmdAvatar size, valid value: xs, sm, md, lg, xl
imgClassString-Additional class for image element

Slots

NameDescription
defaultContent to replace default avatar image element

Events

NameArgumentsDescription
imgloadedImage URLEvent when image loaded
imgerrorErrorEvent when image failed to load

Released under the MIT License.