Avatar

الصورة الرمزيةAvatar

Stablesrc/dsm/components/avatar.tsx

L'avatar représente une personne ou un agent : photo si disponible, sinon initiales sur un fond de couleur douce choisi de façon stable à partir du nom. `AvatarGroup` superpose plusieurs avatars, par exemple les agents affectés à un dossier.

Import

import { Avatar } from "@/dsm/components/avatar";

Exemples

Tailles

De xs à xl, en initiales.

LTR

SIYAKBHENC

Avec photo

Repli automatique en initiales si l'image échoue.

LTR

Groupe

Agents affectés à un dossier, avec dépassement.

LTR

Agents affectés au dossier n° 2026-114872

YAKBHE+2

Usage

Quand l'utiliser

Utilisez `name` pour garantir un repli lisible (initiales) même sans photo ou en cas d'échec de chargement.
Utilisez `AvatarGroup` avec `max` pour représenter une équipe ou plusieurs intervenants sans surcharger l'interface.

Quand ne pas l'utiliser

N'utilisez pas l'avatar seul pour transmettre un statut (en ligne, absent) : associez-le à un `Badge` ou un texte explicite.
Ne comptez pas sur la couleur de repli pour identifier une personne de façon fiable : elle est décorative, pas signifiante.

Accessibilité & langues

Accessibilité

Fournissez toujours `alt` (ou `name`, réutilisé comme alternative) pour que l'image ait un texte de remplacement pertinent.
Le repli en initiales attend la fin du chargement de l'image (`delay`) avant de s'afficher, pour éviter un scintillement.

RTL & multilingue

Dans `AvatarGroup`, le chevauchement utilise une marge logique (`-ms-2.5`) : les avatars se chevauchent du bon côté quel que soit le sens de lecture.

Propriétés

Avatar

Propriété	Type	Défaut	Description
src	string	—	URL de la photo.
alt	string	—	Texte alternatif ; par défaut, reprend `name`.
name	string	—	Nom complet, utilisé pour les initiales et la couleur de repli.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md	Taille de l'avatar.
shape	"circle" \| "square"	circle	Forme du cadre.

AvatarGroup

Propriété	Type	Défaut	Description
max	number	—	Nombre d'avatars affichés avant le badge « +N ».
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md	Taille appliquée à tous les avatars du groupe.
children	ReactElement<AvatarProps> \| ReactElement<AvatarProps>[]	—	Les `Avatar` à superposer.

Composants liés

Badge