Avatar

Show user's avatar, using name or image

Usage

Using image

preview

vue

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

Using alias

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 '@carbon/icons-vue/lib/events/20'
</script>

Sizing

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

preview

vue

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

Variant

Avatar has 2 style variant: image and alias

preview

vue

<template>
  <p-avatar variant="image" src="https://picsum.photos/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/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

Avatar ​

Usage ​

Using image ​

Using alias ​

Using icon ​

Sizing ​

Variant ​

Auto-detect variant ​

API ​

Props ​

Slots ​

Events ​

Avatar

Usage

Using image

Using alias

Using icon

Sizing

Variant

Auto-detect variant

API

Props

Slots

Events