--- title: "Avatar" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Avatar with image, initials, and icon variants. Supports stacked groups, status indicators, and multiple sizes—zero JavaScript required." url: https://frutjam.com/fr/components/avatar --- # Avatar Component Les composants d'avatar affichent des images de profil utilisateur ou des initiales dans un conteneur compact et personnalisable. Construits avec les propriétés personnalisées CSS de Frutjam, les avatars représentent les utilisateurs, les contributeurs ou les membres de l'équipe sur votre interface. Le système d'avatar prend en charge des images et du texte, plusieurs tailles, couleurs, formes, indicateurs d'état, anneaux et dispositions de groupe, ce qui est idéal pour les listes d'utilisateurs, les commentaires, les affichages d'équipe, les sections de profil et les interfaces de messagerie. CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile. | Classe | Taper | Description | | --------------------- | ------------ | ------------------------------------------------------- | | avatar | Base | Conteneur d'avatar circulaire avec initiales ou image | | avatar-group | Modificateur | Pile superposée de plusieurs avatars | | avatar-ring | Modificateur | Ajoute une bordure en anneau colorée autour de l'avatar | | avatar-circle | Style | Forme entièrement circulaire (par défaut) | | avatar-rounded | Style | Forme de rectangle arrondi | | avatar-square | Style | Forme carrée sans arrondi | | avatar-online | Style | Indicateur d'état en ligne vert | | avatar-away | Style | Indicateur d'état d'absence jaune | | avatar-busy | Style | Indicateur d'état occupé rouge | | avatar-offline | Style | Indicateur d'état hors ligne gris | | avatar-xs | Taille | Très petit | | avatar-sm | Taille | Petit | | avatar-md | Taille | Moyen (par défaut) | | avatar-lg | Taille | Grand | | avatar-xl | Taille | Très grand | | avatar-2xl | Taille | 2x très grand | | avatar-primary | Couleur | Couleur du thème principal | | avatar-secondary | Couleur | Couleur du thème secondaire | | avatar-accent | Couleur | Couleur du thème d'accentuation | | avatar-neutral | Couleur | Couleur du thème neutre | | avatar-info | Couleur | Couleur sémantique de l'information | | avatar-success | Couleur | Couleur sémantique du succès | | avatar-warning | Couleur | Couleur sémantique d’avertissement | | avatar-error | Couleur | Couleur sémantique des erreurs | | avatar-ring-primary | Couleur | Bague en couleur primaire | | avatar-ring-secondary | Couleur | Bague en couleur secondaire | | avatar-ring-accent | Couleur | Bague en couleur d'accent | | avatar-ring-neutral | Couleur | Bague de couleur neutre | | avatar-ring-info | Couleur | Bague en couleur info | | avatar-ring-success | Couleur | Bague couleur succès | | avatar-ring-warning | Couleur | Bague de couleur d'avertissement | | avatar-ring-error | Couleur | Bague en couleur d'erreur | ## Utilisation de base Créez des avatars simples avec des initiales de texte ou des couleurs. ## Avatar avec images Affichez les photos de profil utilisateur avec un ajustement automatique de l’image et un dimensionnement réactif. ```html
Strawbery
Strawbery
Strawbery
``` ## Tailles des avatars Utilisez des variantes de taille pour faire évoluer les avatars de très petit (xs) à 2x-large (2xl) pour différents contextes. ```html
XS
SM
MD
LG
XL
2XL
``` ## Couleurs des avatars Appliquez des variantes de couleurs pour différencier les avatars par rôle, équipe ou statut lorsque vous n'utilisez pas d'images. ```html
A
B
C
D
E
F
G
H
``` ## Formes d'avatars Choisissez parmi des formes circulaires (par défaut), arrondies ou carrées pour correspondre à votre système de conception. ```html
●
◇
■
``` ## Avatar avec initiales Affichez les initiales des utilisateurs pour une identification rapide dans les listes, les fils de commentaires et les sections d'équipe. ```html
JD
AR
MS
KL
``` ## Avatar avec indicateur de statut Combinez des avatars avec des badges de statut pour afficher la présence ou la disponibilité des utilisateurs (en ligne, hors ligne, occupé, absent). ```html
JD
AR
MS
KL
``` ## Avatar avec bordure en anneau Ajoutez des anneaux décoratifs autour des avatars pour mettre l’accent, mettre en valeur le statut ou séparer visuellement. ```html
A
B
C
``` ### Variantes de couleurs de bague Choisissez les couleurs des anneaux indépendamment des couleurs d'arrière-plan de l'avatar. ```html
A
B
C
D
E
F
G
``` ## Groupe d'avatars Empilez plusieurs avatars avec une marge négative automatique pour un affichage superposé des membres de l'équipe et des collaborateurs. ```html
A
B
C
D
``` ### Groupe d'avatars avec différentes tailles Combinez plusieurs tailles au sein d’un groupe pour une hiérarchie visuelle. ```html
A
B
C
``` ### Groupe d'avatar avec statut Afficher l'état de disponibilité de chaque membre d'un groupe d'équipe. ```html
A
B
C
``` ## Variantes combinées Mélangez et associez les modificateurs de taille, de couleur, de forme, de statut et d'anneau pour des affichages d'avatar complexes. ```html
SK
AB
MR
```