Avatar

Le portrait d'une personne, ou ce qui le remplace.

Une image met du temps à arriver, échoue parfois, et manque souvent. Les trois cas sont traités sans que la mise en page bouge : l'espace est réservé d'emblée, le repli est peint dessous, et l'image se fond par-dessus quand elle arrive.

Installation

sia-ui add avatar

Ou par le paquet, sans rien copier :

import { Avatar, tintForName, AvatarGroup } from "@sia-ui/react-web";

Props de Avatar

Prop	Type	Défaut	Description
* name	string	—	Le nom de la personne : il sert au repli, à la couleur et à l'annonce.
fallback	ReactNode	—	Remplace les initiales — une icône, un emoji, deux lettres à soi.
initials	1 | 2	2	Nombre d'initiales quand le repli est automatique.
onPress	() => void	—	Rend l'avatar actionnable — un menu de compte, par exemple.
ring	boolean	false	Un liseré qui détache l'avatar de son fond.
shape	"circle" | "rounded" | "square"	—
size	"xs" | "sm" | "md" | "lg" | "xl"	—
status	"online" | "offline" | "busy" | "away"	—
statusLabel	string	—	Le libellé du statut, pour les lecteurs d'écran. Par défaut, celui de la locale.
tint	"primary" | "info" | "success" | "warning" | "danger" | "secondary"	—	Force la teinte au lieu de la dériver du nom.
variant	"soft" | "solid" | "outline"	—

Props de AvatarGroup

Plusieurs personnes, sur une ligne.

Les avatars se chevauchent — c'est ce qui dit « un groupe » plutôt qu'« une liste ». Chacun porte un liseré de la couleur du fond, sans quoi la pile devient une bouillie dès que deux teintes se ressemblent.

Prop	Type	Défaut	Description
max	number	—	Au-delà, les suivants sont résumés par un compteur. Sans limite, une réunion de quarante personnes déborde de sa ligne et n'apprend plus rien : au-delà de cinq visages, on ne lit plus des gens, on lit une foule.
overlap	number	0.25	Le chevauchement, de 0 (côte à côte) à 1 (fortement empilés).
renderOverflow	(count: number) => ReactNode	—	Ce qu'affiche le compteur. Par défaut +N.
shape	"circle" | "rounded" | "square"	circle
size	"xs" | "sm" | "md" | "lg" | "xl"	md
spreadOnHover	boolean	false	Écarte les avatars au survol, pour les distinguer.
variant	"soft" | "solid" | "outline"	soft

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.