Avatar

Displays a user avatar image with automatic fallback to initials. Supports numeric sizing and multiple shapes.

Import

import { Avatar } from 'chunks-ui'

Basic Usage

With an image:

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

Without an image (shows initials derived from alt):

<Avatar alt="Jane Doe" />

This renders “JD” as fallback initials.

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'}/>

?J

Sizes

The size prop accepts a numeric value in pixels:

10px

20px

30px

40px

50px

60px

100px

Shapes

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

Initials Generation

When no src is provided 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"

Props

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