Avatar

The Avatar component provides a way to represent an image with a fallback for when the image cannot be loaded. It supports displaying initials derived from the name prop or an Avatar Icon if no name or src is provided.

Usage

import { Avatar } from '@harnessio/ui'

// ...

return (
  <Avatar name="John Doe" src="/avatar.png" size="sm" />
)

Sizes

The Avatar component supports three sizes: sm, default, and lg.

Shapes

The Avatar component supports two visual shapes: default and rounded.

API Reference

The Avatar component has several props to control its appearance:

Prop	Required	Default	Type
name	false	undefined	string
src	false	undefined	string
size	false	'default'	'default' | 'sm' | 'lg'
rounded	false	false	boolean