JSX
<Avatar alt="Ada Lovelace" />
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Avatar } from '@advui/core'
<Avatar src={user.photoUrl} alt={user.name} />Examples
Image with fallback
Preview
Code
Sizes
Preview
Code
Stacked group
Preview
Code
API reference
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL. The fallback shows until it loads or if it fails. |
alt | string | — | Accessible name — usually the person’s name. |
fallback | string | — | Custom fallback text. Defaults to initials derived from `alt`. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 24–64px. |
shape | 'circle' | 'square' | 'circle' | Outline shape. |
Avatar.Image
The picture, when you compose the avatar yourself.| Prop | Type | Default | Description |
|---|---|---|---|
src required | string | — | Image URL. |
Avatar.Fallback
Shown until the image loads, or if it fails. Holds initials or an icon.Accessibility
- The avatar is a single
imgwhose name isalt; the inner image and initials are hidden to avoid double announcements. - Omit
alt(decorative) when the name is already visible next to the avatar.
Platform notes
Web
Uses a regular
<img> with lazy decoding.iOS
Remote images are cached by React Native’s image loader.
Android
Same as iOS; use HTTPS URLs.