Avatar

An image element with a fallback for representing the user.

Examples

Default

CN

<script setup>
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@empathyds/vue'
</script>

<Avatar>
  <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Avatar Group

RVVJVT

<script setup>
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@empathyds/vue'
</script>

<AvatarGroup>
  <Avatar>
    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
    <AvatarFallback>RV</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/vuejs.png" alt="@vuejs" />
    <AvatarFallback>VJ</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/vitejs.png" alt="@vitejs" />
    <AvatarFallback>VT</AvatarFallback>
  </Avatar>
</AvatarGroup>

Custom Size

RVVJ

<script setup>
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@empathyds/vue'
</script>

<AvatarGroup :size="48">
  <Avatar>
    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
    <AvatarFallback>RV</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/vuejs.png" alt="@vuejs" />
    <AvatarFallback>VJ</AvatarFallback>
  </Avatar>
</AvatarGroup>

Props

AvatarGroup

Prop	Type	Default	Description
max	number	5	Maximum number of avatars to show before "+X" indicator.
size	number	32	Size of the avatars in pixels.

AvatarImage

Prop	Type	Default	Description
src	string	-	The source of the image.
alt	string	-	The alt text of the image.

AvatarFallback

Prop	Type	Default	Description
delayMs	number	-	Useful for delaying rendering so it only appears for those with slower connections.

Slots

Avatar

Slot	Description
default	The content of the avatar (Image and Fallback).

AvatarGroup

Slot	Description
default	The Avatar components to display as a group.

AvatarFallback

Slot	Description
default	The content of the fallback (e.g. initials).