fn-design-system/components/avatar.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
avatar	component	ts	ui	1.0.0	impure	Avatar(props: AvatarProps): JSX.Element	Imagen de usuario circular con fallback a iniciales generadas automaticamente. 5 tamaños via Mantine Avatar.	avatar user image component ui mantine				false		@mantine/core	Componente Avatar que renderiza imagen de usuario circular con fallback a iniciales generadas	false			frontend/functions/ui/avatar.tsx	name type required description src string false URL de la imagen name type required description alt string false Texto alternativo de la imagen name type required description fallback string false Nombre completo del que extraer iniciales (ej: 'Juan Perez' -> 'JP') name type required description initials string false Iniciales explicitas para el fallback (sobrescribe fallback) name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamanio del avatar (default: md) name type required description className string false Clases CSS adicionales		false	react	xs sm md lg xl

Ejemplo

// Con imagen
<Avatar src="https://example.com/user.jpg" alt="Juan Perez" size="md" />

// Con fallback a iniciales
<Avatar fallback="Juan Perez" size="lg" />

// Iniciales explicitas
<Avatar initials="JD" size="sm" />

// Maneja error de imagen automaticamente
<Avatar src="/broken-url.jpg" fallback="Maria Garcia" />

Notas

Usa Mantine Avatar que maneja errores de carga de imagen nativamente. La funcion getInitials extrae 2 iniciales del nombre completo (primera y ultima palabra). Si solo hay una palabra, toma los 2 primeros caracteres. Usa forwardRef para compatibilidad con wrappers.