UserLabel: un componente para mostrar un perfil de usuario o un correo electrónico

§Estructura

➊ Contenedor de avatares (imagen, icono o iniciales)

➋ Contenedor de texto (correo electrónico, nombre de usuario o inicio de sesión)

➌ Icono de cierre

§Tamaño

XL: avatar de 50x50 px y marco de texto que se puede ajustar al ancho del contenido

L - Avatar de 42x42 px + marco de texto que se puede ajustar al ancho del contenido

M: avatar de 32x32px (predeterminado) + marco de texto que se puede ajustar al ancho del contenido

S: avatar de 28x28 px y marco de texto que se puede ajustar al ancho del contenido

XS: avatar de 24 x 24 píxeles y marco de texto que se puede ajustar al ancho del contenido

§Estados

§Tipos de contenido

§Alcance

Tema

El componente tiene dos temas. En el tema Borrar, el contorno, el fondo y los iconos del componente están desactivados.

Tipo de icono

El componente admite varios tipos de iconos de forma predeterminada. Avatares de usuario, iconos de correo electrónico o identificadores basados en letras. Opcionalmente, el icono se puede reemplazar por uno personalizado.

Acciones al hacer clic

El componente le permite iniciar eventos personalizados haciendo clic en el avatar en el área de texto del componente, así como eventos que se activan al hacer clic en el icono «X».