LifeUI
1.53.2Avatar
Un elemento de imagen con una alternativa para representar al usuario.
AG
Tamaños
AG
AG
AG
AG
AG
AG
AG
AG
AG
Colores
AG
AG
AG
AG
AR
Con Indicadores de Estado
Indicadores en Diferentes Posiciones
Ejemplos
Lista de Usuarios con Estados
Equipo de Desarrollo
AG
Ana García
Desarrollador Frontend
ana.garcia@email.com
online
AG
Alex Garrixen
UI engineer / Design Systems & DX
alex.garrixen@email.com
idle
MR
María Rodríguez
Product Manager
maria.rodriguez@email.com
offline
Props
Avatar
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
src | string | - | URL de la imagen del avatar |
fallback | ReactNode | - | Texto o contenido que se muestra cuando no hay imagen o cuando la imagen falla al cargar |
size | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | - | Tamaño del avatar en píxeles |
color | gray | yellow | blue | purple | red | - | Color semántico para el fondo y texto del avatar |
className | string | - | Clases CSS adicionales para el contenedor |
children | ReactNode | - | Contenido adicional del avatar (como AvatarIndicator) |
AvatarIndicator
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
status | online | offline | busy | idle | - | Estado del usuario para mostrar en el indicador |
position | top | bottom | - | Posición del indicador en el avatar |
className | string | - | Clases CSS adicionales para el contenedor |