Download #
npx volt-vue add Avatar
Import #
import Avatar from '@/volt/Avatar.vue';
import AvatarGroup from '@/volt/AvatarGroup.vue';
Label #
A letter Avatar is defined with the label property.
Label
P
V
U
Circle
P
V
U
Badge
U
4
<template>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Avatar from '@/volt/Avatar.vue';
import OverlayBadge from '@/volt/OverlayBadge.vue';
</script>
Icon #
A font icon is displayed as an Avatar with the icon property.
Icon
Circle
Badge
4
<template>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger">
<Avatar icon="pi pi-user" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Avatar from '@/volt/Avatar.vue';
import OverlayBadge from '@/volt/OverlayBadge.vue';
</script>
Image #
Use the image property to display an image as an Avatar.
Image
Badge
Gravatar
<template>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Image</h5>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger">
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</OverlayBadge>
</div>
<div class="flex-auto">
<h5>Gravatar</h5>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Avatar from '@/volt/Avatar.vue';
import OverlayBadge from '@/volt/OverlayBadge.vue';
</script>
AvatarGroup #
Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.
+2
<template>
<div class="card flex justify-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
<Avatar label="+2" shape="circle" />
</AvatarGroup>
</div>
</template>
<script setup lang="ts">
import Avatar from '@/volt/Avatar.vue';
import AvatarGroup from '@/volt/AvatarGroup.vue';
</script>