Avatar ​

The Avatar component is a visual representation of a user or an entity. It can be displayed in various shapes (e.g. circle, square, rounded) and can be initialized with either an image or a name.

Usage ​

Basic Usage ​

To use the VAvatar component, you can simply include it in your template.

Initial Name ​

• prop: name
• type: string
• default:
• required: false

Use prop name to show the user initial name. You can pass the full name to the prop and it will automatically show the initial.

<template>
  <VAvatar name="John Doe" />
</template>

<template>
  <VAvatar name="John Doe" />
</template>

Max Initial ​

• prop: max-initial
• type: number
• default: 2
• required: true

By default it max to 2 initial name, but you can change it with max-initial prop`.

<template>
  <VAvatar name="John Doe" :max-initial="1" />
</template>

<template>
  <VAvatar name="John Doe" :max-initial="1" />
</template>

Image ​

• prop: image
• type: string
• default:
• required: false

We can also set avatar image with image prop. The image prop accept string as its value and usually contains full image url of avatar.

Shape ​

• prop: shape
• type: string. Available values: circle, rounded, square.
• default: circle
• required: true

We can change the shape of avatar via shape prop. By the default, the shape is circle, but you can also change it to rounded or square.

Avatar Indicator ​

We can display indicator to avatar component like online state or verified mark using indicator prop.

We can also use icon as the indicator by leveraging icon from @morpheme/icon. Just pass the icon name to the indicator prop and you good to go. You can also add custom class to indicator element using indicator-class. This is useful for example to change the icon color with Tailwind class.

<template>
  <Avatar
    :src="avatar1"
    size="xl"
    indicator="ic:outline-offline-bolt"
    indicator-class="text-amber-500"
  />
</template>

<template>
  <Avatar
    :src="avatar1"
    size="xl"
    indicator="ic:outline-offline-bolt"
    indicator-class="text-amber-500"
  />
</template>

Avatar Group ​

We can group the avatar with VAvatarGroup component.

Props ​

Avatar ​

Avatar Group ​

Events ​

None

Slots ​

CSS Variables ​

:root {
  --avatar-width: 28px;
  --avatar-height: 28px;
  --avatar-bg-color: var(--color-gray-200);
  --avatar-text-color: var(--color-gray-700);
  --avatar-border-color: var(--color-gray-200);
  --avatar-border-width: 0;
  --avatar-border-style: solid;
  --avatar-border-radius: var(--border-radius-full);
  --avatar-font-weight: 600;
  --avatar-font-size: var(--size-font-sm);
  --avatar-text-transform: uppercase;
  --avatar-group-spacing: -4px;
}

:root {
  --avatar-width: 28px;
  --avatar-height: 28px;
  --avatar-bg-color: var(--color-gray-200);
  --avatar-text-color: var(--color-gray-700);
  --avatar-border-color: var(--color-gray-200);
  --avatar-border-width: 0;
  --avatar-border-style: solid;
  --avatar-border-radius: var(--border-radius-full);
  --avatar-font-weight: 600;
  --avatar-font-size: var(--size-font-sm);
  --avatar-text-transform: uppercase;
  --avatar-group-spacing: -4px;
}

Standalone Installation ​

To install the Avatar component individually, you can use the @morpheme/avatar package. Here's how to install it using NPM:

npm i @morpheme/avatar

npm i @morpheme/avatar

To use the Avatar component, you will need to import it and then add it to your template:

<script setup lang="ts">
import VAvatar from '@morpheme/avatar';
</script>

<template>
  <VAvatar color="primary" name="John Doe" />
  <VAvatar color="primary" src="path-to-image.png" />
</template>

<script setup lang="ts">
import VAvatar from '@morpheme/avatar';
</script>

<template>
  <VAvatar color="primary" name="John Doe" />
  <VAvatar color="primary" src="path-to-image.png" />
</template>

Storybook ​

View Storybook documentation here.