Avatar

Uso

Utiliza src para una imagen y name para las iniciales. Si la imagen falla, el componente muestra las iniciales; cambiar src por otra URL vuelve a intentar cargar la imagen. alt tiene prioridad sobre name para el nombre accesible. size y shape definen la geometría; color se aplica a las iniciales de respaldo. status añade un punto decorativo de presencia, no un estado textual.

Ejemplos

Prueba el ejemplo y abre Código para ver la implementación completa. Reiniciar restablece el estado inicial del ejemplo.

Ejemplos

Reiniciar ejemplo

Demo Código

Ana Martín

Imagen con iniciales de respaldo

Simular fallo de imagen

LGLuis García · DisponibleMRMarta Ruiz · Ocupada

Prueba y configura

Cambia las opciones y revisa la vista previa. El template generado permanece junto a los controles; Código contiene el ejemplo ejecutable completo.

<neu-avatar
  name="Ana Martín"
  size="md"
  shape="circle"
  color="blue"
/>

Datos y contenido

La aplicación proporciona los Inputs y controla la interacción del entorno. Este componente no tiene modelos ni Outputs. La proyección de contenido y los templates de iconos se documentan por separado cuando existen.

Accesibilidad y teclado

Proporciona name o alt cuando el avatar comunica identidad. Sin ambos, se oculta a las tecnologías de asistencia. Los puntos de presencia son decorativos: comunica la disponibilidad en texto contiguo, como hacen los ejemplos. Si una imagen decorativa acompaña a un nombre completo visible, evita anunciar repetidamente la misma identidad en tu diseño.

API

Todos los Inputs públicos se extraen del paquete Core fijado. Los tipos con nombre enlazan con sus definiciones. Solo se enumeran las zonas de proyección y los templates públicos reales.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuAvatarColor } from '@neural-ui/core/avatar';

// Declaración pública (solo referencia)
export type NeuAvatarColor = 'blue' | 'violet' | 'green' | 'amber' | 'red' | 'slate';

import type { NeuAvatarShape } from '@neural-ui/core/avatar';

// Declaración pública (solo referencia)
export type NeuAvatarShape = 'circle' | 'square';

import type { NeuAvatarSize } from '@neural-ui/core/avatar';

// Declaración pública (solo referencia)
export type NeuAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

import type { NeuAvatarStatus } from '@neural-ui/core/avatar';

// Declaración pública (solo referencia)
export type NeuAvatarStatus = 'online' | 'offline' | 'busy' | 'away' | '';

Estilos y tokens

Los tamaños van de 24 a 64 px. circle recorta la imagen en círculo; square utiliza el token público de radio. Los seis colores de iniciales son opciones de la paleta del componente, no valores CSS arbitrarios. La presencia utiliza tokens semánticos de estado.

Componentes relacionados

Consulta los componentes relacionados para componer la interfaz del entorno.

• Card
• Badge