Vitral 0.2
Media

Avatar

A face, initials or an icon in a fixed box, in three sizes and with an optional badge; AvatarGroup overlaps a row of them.

WAI-ARIA tested

Import

main.ts
import { Avatar } from '@vitral/vue';

Label, icon and image

ALGHAda Lovelace
<script setup lang="ts">import { Avatar } from '@vitral/vue';</script> <template>    <Avatar label="AL" />    <Avatar label="GH" shape="circle" />    <Avatar icon="user" />    <Avatar icon="user" shape="circle" />    <Avatar image="https://i.pravatar.cc/96?img=12" alt="Ada Lovelace" shape="circle" /></template>

Sizes

SLXL
<script setup lang="ts">import { Avatar } from '@vitral/vue';</script> <template>    <Avatar label="S" />    <Avatar label="L" size="large" />    <Avatar label="XL" size="xlarge" />    <Avatar icon="user" size="xlarge" shape="circle" /></template>

Group

The group is a list named “Reviewers”; the last avatar counts the rest.

ALGHKJMR+5
<script setup lang="ts">import { Avatar, AvatarGroup } from '@vitral/vue'; const people = ['AL', 'GH', 'KJ', 'MR'];</script> <template>    <AvatarGroup label="Reviewers">        <Avatar v-for="p in people" :key="p" :label="p" shape="circle" />        <Avatar label="+5" shape="circle" />    </AvatarGroup></template>

With a badge

3
GH
<script setup lang="ts">import { Avatar, OverlayBadge } from '@vitral/vue';</script> <template>    <OverlayBadge value="3" severity="danger">        <Avatar icon="user" size="large" />    </OverlayBadge>    <OverlayBadge severity="success">        <Avatar label="GH" size="large" shape="circle" />    </OverlayBadge></template>

API

Read from packages/vue/src/components/Avatar/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
labelstringInitials, or any short text. Ignored when `image` is set.
imagestringAn image source. It fills the box and is cropped to it.
altstringThe image's alternative text. Empty, the default, marks it decorative, which it is when a name sits beside it.
iconIconProp—
sizeAvatarSize—
shape'square' | 'circle'`'square'` (the default) or `'circle'`.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

NameSlot propsDescription
default——

Used in these templates