Avatar
La vignette d'une personne ou d'une structure : photo, initiales ou logo de la marque, avec une pastille de présence en option.
Vue d'ensemble : size × shape
Réglages
Chaque réglage correspond à une propriété du composant.
La taille, de très petit (xs) à très grand (xl).
Une vignette ronde (circle) ou aux coins arrondis du thème (square).
L'échelle des tailles : « default » pour une vignette seule, « fields » pour accompagner un champ, « selectors » pour accompagner une case ou un bouton radio.
Une pastille de présence : en ligne (verte) ou hors ligne (grise). Vide, aucune pastille.
Un contour coloré autour de la vignette.
Les initiales affichées dans la vignette. Vide, c'est le logo de la marque.
Le texte alternatif lu par les lecteurs d'écran (logo ou photo).
Des classes en plus, pour tester une personnalisation.
Le code correspondant
import Avatar from "@neo/ui/components/Avatar.astro";
<Avatar />