Vue Avatar - Material

Create avatar with different styles simply by usingMaterialAvatar component.

Demo

<script setup>
// Vue Material Kit 2 component
import MaterialAvatar from "@/components/MaterialAvatar.vue";
</script>
<template>
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="xxl" />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialAvatar from "@/components/MaterialAvatar.vue";
4</script>
5<template>
6  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="xxl" />
7</template>

Props Information

Name	Type	Default	Description
image*	String		Used to add image to `MaterialAvatar` component. It is a required prop.
alt*	String		Used to add description to `MaterialAvatar` image.
size	'xs''sm''md''lg''xl''xxl'	xxl	Change the `MaterialAvatar` size.
borderRadius	'sm''md''lg''xl''xxl'	xxl	Used to change the `MaterialAvatar` border-radius size.

Sizes

<script setup>
// Vue Material Kit 2 component
import MaterialAvatar from "@/components/MaterialAvatar.vue";
</script>
<template>
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="xs" />
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="sm" />
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="md" />
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="lg" />
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="xl" />
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="xxl" />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialAvatar from "@/components/MaterialAvatar.vue";
4</script>
5<template>
6  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="xs" />
7  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="sm" />
8  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="md" />
9  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="lg" />
10  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="xl" />
11  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" size="xxl" />
12</template>

Variants

<script setup>
// Vue Material Kit 2 component
import MaterialAvatar from "@/components/MaterialAvatar.vue";
</script>
<template>
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" />
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" borderRadius="md" />
  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" borderRadius="xl" />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialAvatar from "@/components/MaterialAvatar.vue";
4</script>
5<template>
6  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" />
7  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" borderRadius="md" />
8  <MaterialAvatar image="/src/assets/img/team-1.jpg" alt="Avatar" borderRadius="xl" />
9</template>

Groups

<script setup>
// Vue Material Kit 2 component
import MaterialAvatar from "@/components/MaterialAvatar.vue";
</script>
<template>
 <div class="avatar-group">
  <a
    href="javascript:;"
    class="avatar avatar-lg"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    title="Ryan Tompson">
    <MaterialAvatar :image="team1" alt="Image placeholder" size="lg" />
  </a>
  <a
    href="javascript:;"
    class="avatar avatar-lg"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    title="Romina Hadid">
    <MaterialAvatar :image="team2" alt="Image placeholder" size="lg" />
  </a>
  <a
    href="javascript:;"
    class="avatar avatar-lg"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    title="Alexander Smith">
    <MaterialAvatar :image="team3" alt="Image placeholder" size="lg" />
  </a>
  <a
    href="javascript:;"
    class="avatar avatar-lg"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    title="Jessica Doe">
    <MaterialAvatar :image="team4" alt="Image placeholder" size="lg" />
  </a>
 </div>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialAvatar from "@/components/MaterialAvatar.vue";
4</script>
5<template>
6 <div class="avatar-group">
7  <a
8    href="javascript:;"
9    class="avatar avatar-lg"
10    data-bs-toggle="tooltip"
11    data-bs-placement="bottom"
12    title="Ryan Tompson">
13    <MaterialAvatar :image="team1" alt="Image placeholder" size="lg" />
14  </a>
15  <a
16    href="javascript:;"
17    class="avatar avatar-lg"
18    data-bs-toggle="tooltip"
19    data-bs-placement="bottom"
20    title="Romina Hadid">
21    <MaterialAvatar :image="team2" alt="Image placeholder" size="lg" />
22  </a>
23  <a
24    href="javascript:;"
25    class="avatar avatar-lg"
26    data-bs-toggle="tooltip"
27    data-bs-placement="bottom"
28    title="Alexander Smith">
29    <MaterialAvatar :image="team3" alt="Image placeholder" size="lg" />
30  </a>
31  <a
32    href="javascript:;"
33    class="avatar avatar-lg"
34    data-bs-toggle="tooltip"
35    data-bs-placement="bottom"
36    title="Jessica Doe">
37    <MaterialAvatar :image="team4" alt="Image placeholder" size="lg" />
38  </a>
39 </div>
40</template>