• Chakra UI Vue
  • Installation
  • Using Nuxt
  • Design Principles
  • Styled System
  • Style Props
  • Responsive Styles
  • Components
  • Accordion
  • Alert
  • Avatar
  • Breadcrumb
  • Button
  • Checkbox
  • Close Button
  • Input
  • Tag

    • 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 :

    <CAvatar  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) :

    <CAvatar  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 --><CAvatar size="md" bg="red.500" /><!-- Custom default icon --><CAvatar>  <CIcon color="white" name="star" /></CAvatar>

    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)

    <CAvatar name="Jonathan Bakebwa">  <CAvatarBadge bg="red.500" placement="top-start" /></CAvatar>

    You can also add icons inside the badge if needed :

    <CAvatar  name="Jonathan Bakebwa"  alt="Jonathan Bakebwa"  src="https://avatars.githubusercontent.com/u/21237954?v=4">  <CAvatarBadge bg="red.500">    <CIcon color="white" name="minus" w="0.3em" />  </CAvatarBadge></CAvatar>

    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.
    +1
    <CAvatar-group max="3" size="lg">  <CAvatar    name="Segun Adebayo"    src="https://avatars.githubusercontent.com/u/6916170?v=4"    alt="Segun Adebayo"  />  <CAvatar    name="Evan You"    alt="Evan You"    src="https://avatars.githubusercontent.com/u/499550?v=4"  />  <CAvatar    name="Anthony Fu"    src="https://avatars.githubusercontent.com/u/11247099?v=4"    alt="Anthony Fu"  />  <CAvatar    name="Maya Shavin"    src="https://avatars.githubusercontent.com/u/6650139?v=4"    alt="Maya Shavin"  /></CAvatar-group>

    Initials

    We use a method that generate initials by splitting and merging the first character in each word from the name prop. But you can also pass the initials you want through the prop initials.

    Edit this page on GitHub