Avatar
Avatar
Una coppia Avatar.Root + Avatar.Image + Avatar.Fallback di Radix — mostra l'immagine una volta caricata, il fallback (iniziali, un'icona, ...) fino ad allora o in caso di errore. Per un avatar "dammi solo un nome" con iniziali automatiche, vedi invece UserAvatar.
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@pompeitech/vesuvius-ui";Default
Gruppo
Per una pila sovrapposta con overflow automatico "+N", vedi AvatarGroup.
Dimensioni e forma
Immagine non caricata → fallback
AvatarImage non renderizza nulla durante il caricamento o in caso di errore — AvatarFallback riempie automaticamente quel vuoto, nessuna gestione onError necessaria da parte tua:
API
Avatar
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
shape | "circle" | "square" | "circle" | |
size | "sm" | "default" | "lg" | "xl" | "default" | sm=24px, default=32px, lg=40px, xl=56px. |
Più ogni prop di Avatar.Root di Radix (che a sua volta inoltra ogni prop nativa di <span>).
AvatarImage — ogni prop nativa di <img>, incluso onLoadingStatusChange, chiamato con "idle" | "loading" | "loaded" | "error" se devi reagire tu stesso allo stato di caricamento.
AvatarFallback
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
delayMs | number | Attendi questo tempo prima di mostrarlo, per evitare un flash mentre un'immagine a caricamento rapido è ancora in sospeso. |
Più ogni prop nativa di <span>.
Accessibilità
L'alt di AvatarImage dovrebbe essere il nome della persona o dell'entità, non un generico "avatar" — gli screen reader lo annunciano esattamente come un normale <img alt>. Il contenuto solo-iniziali di AvatarFallback (senza un proprio alt) significa che dovrebbe trasmettere visivamente la stessa identità che alt avrebbe.