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.

Custom Icon

You can display a custom icon instead of initials or the default user icon using the icon prop.

With Tooltip

Use AvatarWithTooltip to display a tooltip on hover.

API Reference

The Avatar component has several props to control its appearance:

Prop	Required	Default	Type
name	false
src	false
size	false	'sm'
rounded	false	false
icon	false
isGroup	false	false
noInitials	false	false

AvatarWithTooltip

The AvatarWithTooltip component wraps Avatar with a tooltip. It accepts all Avatar props plus:

Prop	Required	Default	Type
tooltipProps	false