Avatar

1<script setup lang="ts">2import { Avatar } from '@vitral/vue';3</script>4 5<template>6    <Avatar label="AL" />7    <Avatar label="GH" shape="circle" />8    <Avatar icon="user" />9    <Avatar icon="user" shape="circle" />10    <Avatar image="https://i.pravatar.cc/96?img=12" alt="Ada Lovelace" shape="circle" />11</template>

1<script setup lang="ts">2import { Avatar } from '@vitral/vue';3</script>4 5<template>6    <Avatar label="S" />7    <Avatar label="L" size="large" />8    <Avatar label="XL" size="xlarge" />9    <Avatar icon="user" size="xlarge" shape="circle" />10</template>

1<script setup lang="ts">2import { Avatar, AvatarGroup } from '@vitral/vue';3 4const people = ['AL', 'GH', 'KJ', 'MR'];5</script>6 7<template>8    <AvatarGroup label="Reviewers">9        <Avatar v-for="p in people" :key="p" :label="p" shape="circle" />10        <Avatar label="+5" shape="circle" />11    </AvatarGroup>12</template>

1<script setup lang="ts">2import { Avatar, OverlayBadge } from '@vitral/vue';3</script>4 5<template>6    <OverlayBadge value="3" severity="danger">7        <Avatar icon="user" size="large" />8    </OverlayBadge>9    <OverlayBadge severity="success">10        <Avatar label="GH" size="large" shape="circle" />11    </OverlayBadge>12</template>