Display
Avatar
Image with initials fallback; the fallback tint is derived from the name, so it is stable everywhere.
Avatar
import { Avatar } from '@anomalia/ui'; Notes
- A broken image URL falls back to initials automatically — no error state to handle.
Examples
Avatars
With no image, initials are drawn on a tint derived from the name — so the same person keeps the same colour across the app, with nothing stored.
Andrea Buttarelli Sofia Renzi Marco Neri Giulia Fabbri Teta Studio
Anomalia API
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | null | — | Image URL. |
name | string | — | Drives alt text, initials and the fallback hue. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 24 / 32 / 40 / 56 / 80px. |
shape | 'circle' | 'rounded' | 'circle' | Silhouette. |
status | 'online' | 'busy' | 'offline' | — | Presence dot. |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.