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" />
)

Sizes

The Avatar component supports four sizes: xs, sm, md, and lg. The default size is sm.

Shapes

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

No initials

In case you want the fallback string to be without initials, pass the noInitials prop.

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	'sm'	'xs' | 'sm' | 'md' | 'lg'
rounded	false	false	boolean
noInitials	false	false	boolean