Avatar

The RhAvatar is a component that provides a flexible and reusable way to display avatar images.

Usage

Once installed, you can import the RhAvatar component into your React application:

copy

import {RhAvatar} from "@rhythm-ui/react"

Then, you can use the RhAvatar component in your JSX code:

copy

<RhAvatar />

Avatar Props

Name	Type	Default	Description
name	string	Rhythm	Name for which avatar is being used - this is required
size	"xs" \| "sm" \| "base" \| "lg" \| "xl"	base	Choose from a variety of sizes
type	"icon" \| "image" \| "text"	icon	Set the avatar type
src	string		Link to the image or svg if it's an image or svg.
className	string		ClassName to allow for custom classes
innerClass	string		ClassName for icon inside
rectangular	boolean		Will remove full border radius from avatars
onClick	() => unknown

Avatar Group

Name	Type	Description
max	number	Sets maximum number of avatars to display in a group
className	string	ClassName to allow for custom classes
innerClass	string	Classes apply to avatars inside groups

Rectangular

The rectangular prop determines the shape of the avatar. which is a boolean value that indicates whether the avatar has a rectangular shape or a circular one.

copy

<RhAvatar rectangular />

Size

The RhAvatar component's size feature allows you to create avatars in different sizes that can easily fit into various parts of your app's interface.

copy

<div className="flex items-center gap-4">
  <RhAvatar name="kamal" size="xs" />
  <RhAvatar name="Nihal" size="sm" />
  <RhAvatar name="Ashutosh" size="base" />
  <RhAvatar name="karan Rai" size="lg" />
  <RhAvatar name="Ram Kumar" size="xl" />
</div>

Type

The type prop that can be passed to this component determines the type of the avatar image, which can be set to icon, image, or text.

copy

<div className="flex items-center gap-4 ">
  <RhAvatar type="icon" />
  <RhAvatar
    type="image"
    src="https://images.pexels.com/photos/12871449/pexels-photo-12871449.jpeg?cs=srgb&dl=pexels-skildring-by-andreas-ellegaard-12871449.jpg&fm=jpg"
  />
  <RhAvatar type="text" />
</div>

Avatar Group

The RhAvatarGroup component is used to display a group of avatars (profile pictures) in a container. Use the max prop to set a maximum number of avatars to display.

copy

<RhAvatarGroup max={3} innerClass={"border-2 border-white"}>
  <RhAvatar
    name="karan"
    type="text"
    size="base"
    className="border-2 border-white dark:border-dark-900"
  />
  <RhAvatar
    name="Ram"
    type="text"
    size="base"
    className="border-2 border-white dark:border-dark-900"
  />
  <RhAvatar
    name="Nihal"
    type="text"
    size="base"
    className="border-2 border-white dark:border-dark-900"
  />
  <RhAvatar
    name="Ashutosh"
    type="text"
    size="base"
    className="border-2 border-white dark:border-dark-900"
  />
  <RhAvatar
    name=" Umang"
    type="text"
    size="base"
    className="border-2 border-white dark:border-dark-900"
  />
</RhAvatarGroup>