Avatar
Composant d'avatar circulaire avec support d'image et fallback texte. Construit sur Radix UI Avatar. L'image est chargee de maniere asynchrone avec un fallback affiche pendant le chargement ou en cas d'erreur.
Avec image
L'avatar affiche l'image fournie. Si l'image ne charge pas, le fallback avec les initiales est affiche automatiquement.
TM
Thomas M
Sub-10 solver
Fallback avec initiales
Sans image, le fallback affiche les initiales sur un fond muted. Utile pour les utilisateurs sans photo de profil.
SCJDMR
Tailles
La taille par defaut est size-8 (32px). Utilisez className pour ajuster.
SMLXL2XL
Props
Avatar (Root)
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Classes CSS additionnelles. Par defaut : size-8, rounded-full, overflow-hidden. |
AvatarImage
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | URL de l'image de l'avatar. |
| alt | string | — | Texte alternatif pour l'accessibilite. |
| className | string | — | Classes CSS additionnelles. Par defaut : aspect-square size-full. |
AvatarFallback
| Prop | Type | Default | Description |
|---|---|---|---|
| delayMs | number | — | Delai en ms avant d'afficher le fallback. Evite un flash si l'image charge vite. |
| className | string | — | Classes CSS additionnelles. Par defaut : bg-muted, flex center, rounded-full. |