Avatar
Représente visuellement un utilisateur via une photo, une icône ou des initiales.
Description
L’avatar est utilisé pour identifier un utilisateur dans une interface. Il peut apparaître seul ou être enrichi d’éléments interactifs comme un chevron pour accéder à un menu compte, ou un bouton d’édition pour modifier la photo de profil.
Plateformes
Anatomie
-
Photo / Icône / Initiales : identité visuelle de l’utilisateur. Si la photo est absente, les initiales ou une icône générique sont utilisées.
-
Chevron (optionnel) : icône permettant d’ouvrir un menu lié au compte utilisateur (profil, déconnexion, paramètres…).
-
Edit (optionnel) : bouton permettant à l’utilisateur de modifier sa photo de profil.
Usage
Quand l'utiliser ?
On utilise le composant Avatar dans les cas suivants :
- Pour représenter l’utilisateur connecté dans une barre de navigation ou un menu.
- Dans une liste de membres, collaborateurs ou profils.
- Lorsqu’il est nécessaire d’identifier visuellement un utilisateur sans afficher son nom complet.
- Dans les paramètres du profil utilisateur pour éditer sa photo de profil.
- Pour représenter visuellement notre IA.
Anatomie
-
Photo / Icône / Initiales : identité visuelle de l’utilisateur. Si la photo est absente, les initiales ou une icône générique sont utilisées.
-
Edit (optionnel) : bouton permettant à l’utilisateur de modifier sa photo de profil.
-
Chevron (optionnel) : icône permettant d’ouvrir un menu lié au compte utilisateur (profil, déconnexion, paramètres…).
Usage
Quand l'utiliser ?
On utilise le composant Avatar dans les cas suivants :
- Pour représenter l’utilisateur connecté dans une barre de navigation ou un menu.
- Dans une liste de membres, collaborateurs ou profils.
- Lorsqu’il est nécessaire d’identifier visuellement un utilisateur sans afficher son nom complet.
- Dans les paramètres du profil utilisateur pour éditer sa photo de profil.
- Pour représenter visuellement notre IA.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.