Avatar Component

The Avatar component is used to display user avatars in various forms such as images, initials, or custom icons. It can be customized with different sizes, colors, and additional status icons.

Usage

import Avatar from './Avatar';

function Example() {
  return (
    <Avatar
      alt="John Doe"
      size="lg"
      src="path/to/image.jpg"
      variant="blue"
      type="image"
      topStatus="verified"
      bottomStatus="online"
      userName="John Doe"
      className="custom-class"
    />
  );
}

Props

• alt: string

  • Default: ''
  • Description: Alt text. Usually the user's name.

• size: oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'huge'])

  • Default: 'md'
  • Description: Size of the avatar.

• src: string

  • Default: undefined
  • Description: Image source URL of the avatar.

• className: string

  • Default: ''
  • Description: Additional class name for custom styling.

• userName: string

  • Default: ''
  • Description: The name of the person associated with the avatar.

• variant: oneOf(['blue', 'orange', 'red', 'green', 'yellow', 'purple', 'sky', 'pink', 'teal', 'white'])

  • Default: 'blue'
  • Description: Background color of the avatar.

• type: oneOf([ 'letters', 'image', 'avatar'])

  • Default: 'default'
  • Description: Type of avatar to display: user image, initials or default avatar.

• topStatus: oneOf(['verified', 'pin', 'favorite', 'add', 'remove', 'notification'])

  • Default: undefined
  • Description: Top status icon for the avatar.

• bottomStatus: oneOf(['online', 'offline', 'busy', 'away', 'company'])

  • Default: undefined
  • Description: Bottom status icon for the avatar.

Dicebear

Dicebear can be used as a normal image by using its js-library

import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

const avatar = createAvatar(lorelei, {
  seed: 'John Doe',
});

<Avatar
  className="ml-4"
  size="xxl"
  variant="pink"
  src={avatar.toDataUri()}
  type="userImage"
  alt="avatar"
/>

Associated Components

AvatarGroup

Groups multiple Avatar components together, displaying up to 4 avatars, with an optional additional avatar indicating more members.

AvatarGroup Example

import AvatarGroup from './AvatarGroup';
import Avatar from './Avatar';

function AvatarGroupExample() {
  return (
    <div className="mt-3">
      <AvatarGroup className="m-4" size="xl">
        <Avatar type="image" userName="rabeeh0ta" variant="pink" />
        <Avatar variant="yellow" src="https://avatars.githubusercontent.com/u/43750842?v=4" type="image" alt="avatar" />
        <Avatar type="image" src="https://avatars.githubusercontent.com/u/43750842?v=4" userName="rafeeh_cp" variant="sky" />
        <Avatar type="image" userName="rabeeh0ta" variant="teal" />
        <Avatar type="letters" userName="zameel_hassan" variant="yellow" />
        <Avatar type="image" src="https://avatars.githubusercontent.com/u/43750842?v=4" userName="rafeeh_cp" variant="sky" />
        <Avatar type="letters" userName="rabeeh0ta" variant="pink" />
        <Avatar type="image" src={avatar.toDataUri()} userName="zameel_hassan" variant="yellow" />
        <Avatar type="letters" userName="rafeeh_cp" variant="sky" />
      </AvatarGroup>
    </div>
  );
}

import AvatarGroupCompact from './AvatarGroupCompact';
import Avatar from './Avatar';

function AvatarGroupCompactExample() {
  return (
    <div className="mt-4">
      <AvatarGroupCompact className="mt-4" size="xs">
        <Avatar variant="pink" src="https://avatars.githubusercontent.com/u/43750842?v=4" type="image" alt="avatar" />
        <Avatar variant="pink" src="https://avatars.githubusercontent.com/u/43750842?v=4" type="image" alt="avatar" />
        <Avatar variant="pink" src="https://avatars.githubusercontent.com/u/43750842?v=4" type="image" alt="avatar" />
        <Avatar variant="pink" src="https://avatars.githubusercontent.com/u/43750842?v=4" type="image" alt="avatar" />
        <Avatar variant="pink" src="https://avatars.githubusercontent.com/u/43750842?v=4" type="image" alt="avatar" />
        <Avatar variant="pink" src="https://avatars.githubusercontent.com/u/43750842?v=4" type="image" alt="avatar" />
      </AvatarGroupCompact>
    </div>
  );
}

AvatarGroupCompact

A compact version of AvatarGroup, ideal for displaying avatars in a smaller, more condensed format.

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	11
frontend-app-dashboard	3
frontend-app-course-authoring	1
frontend-app-discussions	2
frontend-app-account	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/components/ProfileCardLarge.jsx
• src/components/ProfileDrawer.jsx
• src/hooks/useStaffData.jsx
• src/pages/analytics/learner-table/index.jsx
• src/pages/program-single/program-team/index.jsx
• src/pages/users/index.jsx
• src/pages/users/learners/index.jsx
• src/pages/users/staffs/index.jsx
• src/pages/users/teams/AddUsersToTeamDrawer.jsx
• src/pages/users/teams/TeamSingle.jsx
• src/pages/view-ticket/MessageBubble.jsx

frontend-app-dashboard

• src/components/ProfileCardLarge.jsx
• src/pages/support/view-ticket/MessageBubble.jsx
• src/pages/support/view-ticket/TicketHeader.jsx

frontend-app-course-authoring

• src/fee-statistics/index.jsx

frontend-app-discussions

• src/discussions/learners/learner/LearnerCard.jsx
• src/discussions/post-comments/comments/comment/CommentHeader.jsx

frontend-app-account

• src/components/ProfileCardLarge.jsx