Avatar

The avatar component is used to represent user and displays the profile picture initials or fallback icon

Imports

This packages exports the following components:

• CAvatar : The image that represents the user.
• CAvatarBadge : A wrapper that displays its content on the right corner of the avatar.
• CAvatarGroup : A wrapper to stack multiple Avatars together.

import { CAvatar, CAvatarBadge, CAvatarGroup } from '@chakra-ui/vue-next';

Usage

Default :

<c-avatar  name="Evan You"  alt="Evan You"  src="https://www.github.com/yyx990803.png"/>

Avatar Sizes :

The avatar component comes in 7 different sizes (2xs|xs | sm | md | lg | xl | 2xl) :

<c-avatar  name="Evan You"  alt="Evan You"  src="https://avatars.githubusercontent.com/u/499550?v=4"  size="xs"/>

Avatar Fallbacks :

If there is an error loading the src of the avatar, there are 2 fallbacks :

• If there's a name prop, we use it to generate the initials and a random, accessible background color.
• If there's no name prop, we use a default Avatar.

Customize the Fallback Avatar :

You can customize the fallback Avatar either by using style props or by passing a custom icon.

<!-- Styles props --><c-avatar size="md" bg="red.500" /><!-- Custom default icon --><c-avatar>  <c-icon color="white" name="star" /></c-avatar>

Avatar with badges

In some products, you might need to show a badge on the avatar. We call this a badge.

The badge is by default on the bottom right corner, but you can change its position by using the prop position (top-start | top-end | bottom-start | bottom-end)

:: ::

<c-avatar name="Jonathan Bakebwa">  <c-avatar-badge bg="red.500" placement="top-start" /></c-avatar>

You can also add icons inside the badge if needed :

<c-avatar  name="Jonathan Bakebwa"  alt="Jonathan Bakebwa"  src="https://avatars.githubusercontent.com/u/21237954?v=4">  <c-avatar-badge bg="red.500">    <c-icon color="white" name="minus" w="0.3em" />  </c-avatar-badge></c-avatar>

Avatar Group

In some cases, you might need to stack avatars as a group. Use the CAvatarGroup component.

• To limit the amount of avatars to show, use the max prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars).
• To size all the avatars equally, pass the size prop.
• To adjust the spacing between the avatars, pass the spacing prop.

<c-avatar-group max="3" size="lg">  <c-avatar    name="Segun Adebayo"    src="https://avatars.githubusercontent.com/u/6916170?v=4"    alt="Segun Adebayo"  />  <c-avatar    name="Evan You"    alt="Evan You"    src="https://avatars.githubusercontent.com/u/499550?v=4"  />  <c-avatar    name="Anthony Fu"    src="https://avatars.githubusercontent.com/u/11247099?v=4"    alt="Anthony Fu"  />  <c-avatar    name="Maya Shavin"    src="https://avatars.githubusercontent.com/u/6650139?v=4"    alt="Maya Shavin"  /></c-avatar-group>