A circular portrait that falls back to initials when there is no source, or when the image fails to load.
ImageInitialsFailed imageDecorative
BO CL The first has a photo; the rest fall back to initials. The last has an empty alt, for use beside text that already names the person.
<Avatar src={member.photo} alt="Ana Ruiz" initials="AR" size={40} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Avatar } from '@chanrg/4ui';<Avatar src={member.photo} alt="Ana Ruiz" initials="AR" size={40} />Falls back to initials
A broken or missing source swaps in the initials without leaving a broken image behind; the failed URL is remembered, so a new src is retried on its own.
The photo never decoded, so the initials took over<Avatar src={brokenUrl} alt="Ana Ruiz" initials="AR" size={40} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL. |
alt | string | '' | Names the avatar. Leave empty when adjacent text already says who this is. |
initials | string | '' | Fallback glyphs, uppercased and scaled with the size. |
size | number | 32 | Diameter in pixels. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-surface-3 | Fallback disc behind the initials. |
Accessibility
- With alt the fallback exposes role="img" and the name; with an empty alt it is hidden, for use beside text that already names the person.
- The failed URL is remembered rather than a boolean flag, so replacing src retries the image instead of staying on the fallback.