Avatar
DraftDisplays a user's profile image with a graceful initials fallback when no image is available.
- Usage
- Specs
- Content
- Status & changelog
- Code
Common alternative names
Profile image, User icon, Thumbnail
Anatomy
An avatar displays a user representation inside a circular container. The content changes depending on whether an asset (photo) is available.
Asset added
Circle container
(Required)
(Required)
Photo
(Recommended)
(Recommended)
No asset added (fallback)
Background fill
(Required)
(Required)
Letters
(Recommended)
(Recommended)
👤
Vector
(Optional)
(Optional)
☺
Icon
(Optional)
(Optional)
Badge
(Optional)
(Optional)
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Usage
import { Avatar } from '@arch-ui/components';
// With an image
<Avatar src="/images/jane.jpg" name="Jane Doe" />
// Initials fallback (no src)
<Avatar name="John Smith" />
Sizes
Six sizes are available, from compact UI elements to large profile displays.
<Avatar name="AB" size="xsmall" /> {/* 24px */}
<Avatar name="AB" size="small" /> {/* 36px */}
<Avatar name="AB" size="medium" /> {/* 48px -- default */}
<Avatar name="AB" size="large" /> {/* 64px */}
<Avatar name="AB" size="xlarge" /> {/* 80px */}
<Avatar name="AB" size="xxlarge" /> {/* 112px */}
Shapes
<Avatar name="Jane Doe" shape="circle" /> {/* default */}
<Avatar name="Jane Doe" shape="square" />
Image error fallback
When the src image fails to load, the component automatically falls back to displaying the user's initials. No extra handling is needed.
<Avatar src="/broken-link.jpg" name="Jane Doe" />
{/* Renders "JD" initials */}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | -- | URL of the avatar image. Falls back to initials when absent or on error. |
name | string | required | Full name. Drives alt text and initials. |
size | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'medium' | Rendered size. |
shape | 'circle' | 'square' | 'circle' | Shape of the avatar. |
className | string | -- | Additional CSS class names. |
Accessibility
- When an image is displayed, the
<img>element carriesalt={name}. - When initials are shown instead, the root
<span>getsrole="img"andaria-label={name}so screen readers announce the person's name. - The initials text is marked
aria-hidden="true"since the label already conveys the information.