Avatar

Displays a user avatar image with automatic fallback to initials. Supports numeric sizing and multiple shapes. Built on Base UI’s Avatar.

Import

import { Avatar } from 'chunks-ui'

Basic Usage

With an image:

<Avatar src="/jane.jpeg" alt="Jane Doe" />

Without an image (shows initials derived from alt):

<Avatar alt="Jane Doe" />

JDJD

This renders “JD” as fallback initials.

The initials also show while the image loads and if it fails to load (a 404, a blocked or expired URL), so a broken image never shows.

Custom Fallback

Override the auto-generated initials with the fallback prop:

<Avatar fallback="?" />
<Avatar alt="John Doe" fallback="J" />
<Avatar alt="John Doe" fallback="J" src={'/bro2.jpeg'}/>

?JJ

Sizes

The size prop accepts a numeric value in pixels:

10px

20px

30px

40px

50px

60px

100px

Shapes

<Avatar alt="User" shape="circle" src="/bro.jpeg" size={50} />
<Avatar alt="User" shape="rounded" src="/bro.jpeg" size={50} />
<Avatar alt="User" shape="square" src="/bro.jpeg" size={50} />

UUU

Initials Generation

When there is no image to show (no src, or it is loading or failed) and no fallback is set, initials are automatically generated from the alt text:

• "Jane Doe" produces "JD"
• "Alice B. Charlie" produces "AB" (first two initials)
• Single word "Admin" produces "A"

Accessibility

alt names the avatar. With a loaded image, the name is the image’s alt text. Without one, the initials are exposed as an image (role="img") labelled with alt, so screen readers announce “Jane Doe”, not “JD”. Without alt, the avatar is decorative and hidden from assistive technology.

Next to a visible name, omit alt and pass the initials as fallback, so the name isn’t announced twice:

<Avatar fallback="JD" />
<span>Jane Doe</span>

Props

All other props are forwarded to the underlying <span> element.