'/%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
Persona
Una persona de un vistazo: avatar con presencia, un nombre y hasta dos líneas más (cargo, estado), en cuatro tamaños, con el texto después o debajo del avatar y algo al final.
import { Persona } from '@alea/ui';
Ejemplos
Persona
Un avatar con presencia, un nombre y hasta dos líneas más, en cuatro tamaños; el texto después o debajo del avatar.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Size
size - Status
status - Text Position
textPosition
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.
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-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Type
--alea-font-size-base…--alea-font-size-lg…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Props
Persona props
Una persona de un vistazo: avatar con presencia, nombre y hasta dos líneas más. Para listas, tarjetas, menús y comentarios.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
nameobligatoria | string | - | El nombre de la persona (o del equipo). |
className | string | - | Clases extra. |
end | ReactNode | - | Algo al final: un badge, un botón. |
secondary | ReactNode | - | Una segunda línea: rol, email. |
size | "sm" | "md" | "lg" | "xl" | 'md' | sm (avatar de 24 px, una línea), md (40 px, por defecto), lg (56 px), xl (80 px). |
src | string | - | URL de la foto. |
status | "online" | "away" | "busy" | "offline" | - | Un punto de presencia en el avatar. |
tertiary | ReactNode | - | Una tercera línea, mostrada desde el tamaño lg: mensaje de estado, última conexión. |
textPosition | "after" | "below" | 'after' | Texto después del avatar (por defecto) o debajo, centrado. |
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.
- Variantes
sizesmmdlgxlstatusonlineawaybusyofflinetextPositionafterbelow- 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-persona.alea-persona-text.alea-persona-name.alea-persona-secondary.alea-persona-tertiary.alea-persona-end- Atributos data
data-size=smdata-text=belowdata-size=lgdata-size=xl
Accesibilidad
- El avatar se nombra con la persona y su presencia, así el estado no es solo un color.
- El texto se corta con puntos suspensivos; da el valor completo en otro lugar cuando importa.
Qué hacer y qué evitar
Hacer
- Úsalo en listas, menús y tarjetas donde aparezca una persona.
Evitar
- No hagas todo el persona un botón y además pongas botones en end.