'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
Avatar
Una persona, como foto o iniciales sobre un degradado, con estado y grupos.
import { Avatar, AvatarGroup } from '@alea/ui';
Ejemplos
Avatares
Iniciales sobre un degradado que es siempre el mismo para un nombre; una foto cuando la hay.
Grupo
El resto como +N.
Anillo, contador y respaldo
ring marca al usuario actual o una historia (accent o un tono); count muestra elementos sin leer en la esquina; fallback reemplaza las iniciales por un ícono o un logo; 2xl son 96 px.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Shape
shape - Size
size - Status
status - Image
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
| size | Alto | Ancho | Padding (y · x) | Radio | Tamaño de texto | Icono | Separación |
|---|---|---|---|---|---|---|---|
xs | - | - | - | - | - | - | - |
sm | - | - | - | - | - | - | - |
md | - | - | - | - | - | - | - |
lg | - | - | - | - | - | - | - |
xl | - | - | - | - | - | - | - |
Cada tamaño y espacio es múltiplo de 4 px.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-accent-on…--alea-bg…--alea-border-strong…--alea-gradient-accent…--alea-status-danger…--alea-status-info…--alea-status-success…--alea-status-warning…
Type
--alea-font-family-body…--alea-font-weight-semibold…
Component
--alea-avatar-size…
Other
--alea-presence-away…--alea-presence-busy…--alea-presence-offline…--alea-presence-online…
Props
Avatar props
Una persona: foto, o iniciales sobre un degradado.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
nameobligatoria | string | - | El nombre de la persona: texto alternativo e iniciales. |
count | number | - | Una cantidad en la esquina superior (mensajes sin leer). |
fallback | ReactNode | - | Lo que se muestra sin foto en lugar de iniciales: un ícono, un logo. |
ring | boolean | "neutral" | "accent" | "success" | "warning" | "danger" | "info" | - | Un anillo alrededor del avatar, en el acento o un tono (para el usuario actual, o una historia). |
shape | "square" | "circle" | 'circle' | circle (por defecto) o square. |
size | "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | 'md' | xs 24, sm 32, md 40 (por defecto), lg 56, xl 80, 2xl 96 px. |
src | string | - | URL de la imagen. Vuelve a las iniciales si falta o falla. |
status | "online" | "away" | "busy" | "offline" | - | Un punto de estado en la esquina. |
AvatarGroup props
Avatares superpuestos con un +N para el resto.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
peopleobligatoria | { name: string; src?: string | undefined; }[] | - | Las personas: name, y src para una foto. |
fan | boolean | - | Los avatares se separan con hover o foco (el patrón fan). |
max | number | 4 | Muestra esta cantidad, luego +N. Por defecto 4. |
size | "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | 'md' | Tamaño de todos los avatares. |
spacing | "none" | "tight" | "normal" | - | Cuánto se superponen los avatares: tight, normal (por defecto) o none (lado a lado). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Size × shape
Oscuro
size="xs" | size="sm" | size="md" | size="lg" | size="xl" | |
|---|---|---|---|---|---|
shape="circle" | |||||
shape="square" |
Claro
size="xs" | size="sm" | size="md" | size="lg" | size="xl" | |
|---|---|---|---|---|---|
shape="circle" | |||||
shape="square" |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Status
Oscuro
status="online" | status="away" | status="busy" | status="offline" | |
|---|---|---|---|---|
Claro
status="online" | status="away" | status="busy" | status="offline" | |
|---|---|---|---|---|
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Avatar
- Variantes
shapesquarecirclesizesmmdlgxlxs2xlstatusonlineawaybusyoffline- Motion
- pulsefanmore
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-avatar.alea-avatar-fallback.alea-avatar-initials.alea-avatar-status.alea-avatar-count- Atributos data
data-shape=squaredata-size=xsdata-size=smdata-size=lgdata-size=xldata-status=onlinedata-status=awaydata-status=busydata-status=offlinedata-size=2xldata-ringdata-ring=successdata-ring=warningdata-ring=dangerdata-ring=infodata-ring=neutraldata-spacing=tightdata-spacing=none
AvatarGroup
- Variantes
sizesmmdlgxlxs2xlspacingnonetightnormal- Motion
- fanmore
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-avatar-group.alea-avatar.alea-avatar-more- Atributos data
data-shape=squaredata-size=xsdata-size=smdata-size=lgdata-size=xldata-size=2xldata-ringdata-ring=successdata-ring=warningdata-ring=dangerdata-ring=infodata-ring=neutraldata-spacing=tightdata-spacing=none
Accesibilidad
- Se nombra con el nombre de la persona y su estado.
Qué hacer y qué evitar
Hacer
- Pasa siempre name: da las iniciales y el nombre accesible.
- Usa AvatarGroup con max para listas largas de personas.
Evitar
- No uses un avatar solo para identificar a alguien en una lista: muestra el nombre también.
- No dependas solo del color del punto de estado.