@chakra-ui/avatar

Basic Avatar

This feature allows you to create a basic avatar with a name and an image source. If the image source is provided, it will display the image; otherwise, it will display the initials of the name.

import { Avatar } from '@chakra-ui/avatar';

function BasicAvatar() {
  return <Avatar name='John Doe' src='https://bit.ly/dan-abramov' />;
}

Avatar with Fallback

This feature allows you to create an avatar that displays the initials of the name if no image source is provided.

import { Avatar } from '@chakra-ui/avatar';

function AvatarWithFallback() {
  return <Avatar name='John Doe' />;
}

Avatar Group

This feature allows you to create a group of avatars. You can specify the maximum number of avatars to display, and the rest will be shown as a count.

import { Avatar, AvatarGroup } from '@chakra-ui/avatar';

function AvatarGroupExample() {
  return (
    <AvatarGroup size='md' max={2}>
      <Avatar name='Ryan Florence' src='https://bit.ly/ryan-florence' />
      <Avatar name='Segun Adebayo' src='https://bit.ly/sage-adebayo' />
      <Avatar name='Kent Dodds' src='https://bit.ly/kent-c-dodds' />
      <Avatar name='Prosper Otemuyiwa' src='https://bit.ly/prosper-baba' />
    </AvatarGroup>
  );
}