Avatar - rafty/ui Docs

The Avatar component is used to represent a user and can display the profile picture, initials or fallback icon.

This is a custom component crafted to adhere to our styling conventions, resulting in limited styling options and available props.

Anatomy

Import the component.

import { Avatar } from "@rafty/ui";

<Avatar />;

Usage

By default, the Avatar component displays a generic Person Icon. You can replace this icon with a text string by passing name prop or an image by passing src prop.

<Avatar name="Sample Name" />

Size

There are 3 size options in Avatar Component: sm, md (default) & lg.

<Avatar
  name="Jhon"
  size="sm"
  src="https://images.unsplash.com/photo-1682695795255-b236b1f1267d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
/>

Avatar Group

In case, you might need to stack avatars as a group. Use the AvatarGroup component.
To limit the number of avatars, 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 in AvatarGroup.

<AvatarGroup
  className="h-12"
  max={2}
  size="lg"
>
  <Avatar
    name="Lily"
    src="https://images.unsplash.com/photo-1682695795255-b236b1f1267d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
  />
  <Avatar
    name="Jhon"
    src="https://images.unsplash.com/photo-1682695795255-b236b1f1267d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
  />
  <Avatar
    name="Aman"
    src="https://images.unsplash.com/photo-1682695795255-b236b1f1267d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
  />
  <Avatar
    name="Jhon"
    src="https://images.unsplash.com/photo-1682695795255-b236b1f1267d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
  />
</AvatarGroup>