Avatar

Avatar with sizes and variants

Overview

Avatars represent a user or entity with a profile image and initials fallback.

Import the component:

import { Avatar, AvatarImage, AvatarFallback } from "@eqtylab/equality";

Basic usage with an image and fallback:

<Avatar>
  <AvatarImage src="/path/to/image.jpg" alt="User name" />
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

When a valid src is provided to AvatarImage, the avatar displays the image.

When no image is provided or the image fails to load, AvatarFallback is displayed instead, typically showing initials.

The size prop controls the dimensions of the avatar.

<Avatar size="sm">...</Avatar>
<Avatar size="md">...</Avatar>
<Avatar size="lg">...</Avatar>
<Avatar size="xl">...</Avatar>

The shape prop controls the border radius of the avatar.

<Avatar shape="circle">...</Avatar>
<Avatar shape="square">...</Avatar>

Name	Description
`children`	Accepts `AvatarImage` and `AvatarFallback` as children

Name	Description	Type	Default	Required
`size`	The size of the avatar	`sm`, `md`, `lg`, `xl`	`md`	❌
`shape`	The shape of the avatar	`circle`, `square`	`circle`	❌

Name	Description	Type	Default	Required
`src`	The image source URL	`string`	-	❌
`alt`	Accessible alt text for image	`string`	-	❌

No properties, but needs child content to render.