Avatar

The Avatar component provides a way to represent an image with a fallback for when the image can not be loaded.

Usage

import { Avatar } from '@harnessio/ui/components'

//...

return (
  <Avatar.Root>
    <Avatar.Image src="avatarurl.jpg" alt="Avatar image" />
    <Avatar.Fallback>JD</Avatar.Fallback>
  </Avatar.Root>
)

Anatomy

All parts of the Avatar component can be imported and composed as required.

<Avatar.Root>
  <Avatar.Image />
  <Avatar.Fallback />
</Avatar.Root>

API Reference

Root

The Root component serves as the main container for all avatar elements.

<Avatar.Root
  size={6}          // [OPTIONAL] Size of the avatar, can be one of "4.5", "6", "8", or "20"
  className="class" // [OPTIONAL] Class name to be applied to the outermost element
>
  {/* Image and Fallback components */}
</Avatar.Root>

Prop	Required	Default	Type
size	false	'6'	string
className	false		string

Image

The Image component is used to display an image within the avatar. If the image can not be loaded, the Fallback component will be displayed instead.

<Avatar.Image
  src="avatarurl.jpg" // source URL of the image
  alt="Avatar image"  // [OPTIONAL] alt text of the image
  className="class"   // [OPTIONAL] Class name to be applied to the image element
/>

Prop	Required	Default	Type
src	true		string
alt	false		string
className	false		string

Fallback

The Fallback component is displayed when the image can not be loaded.

<Avatar.Fallback
  className="class" // [OPTIONAL] Class name to be applied to the fallback element
>
  JD
</Avatar.Fallback>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string