Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los elementos técnicos:

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

§Estructura

➊ Contenedor del avatar (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 50x50px + marco de texto que se puede ajustar al ancho del contenido

L - avatar de 42x42px + 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 28x28px + marco de texto que se puede ajustar al ancho del contenido

XS - avatar de 24x24px + 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 "Clear" (Claro), el borde, el fondo y los iconos del componente están deshabilitados.

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 te permite iniciar eventos personalizados al hacer clic en el avatar en el área de texto del componente, así como eventos que se activan al hacer clic en el icono 'X'.