Avatar

Representación visual de un usuario mediante imagen o iniciales generadas automáticamente. El tono del fallback se deriva del nombre de forma determinista, y un indicador de presencia opcional muestra disponibilidad en tiempo real.

ALBDCRDMEV

Instalación#

bash
pnpm add @tsukira/ui

Uso#

tsx
import { Avatar } from "@tsukira/ui"; <Avatar name="Ana López" size="md" presence="online" /><Avatar name="Bruno Díaz" shape="rounded" presence="busy" />

Ejemplos#

Playground

cambia las props y el código se regenera
AL

src

name

alt

size

shape

tone

presence

fallback

Tamaños

ALALALALALAL

Formas

circle (default) · rounded
BDBD

Indicador de presencia

online · offline · busy · away
ALBDCRDM

Tonos de fallback deterministas

el tono se deriva del nombre — siempre el mismo color para el mismo usuario
ALBDCRDMEVFG

Fusión: fila de comentario

Avatar + nombre + Badge de rol
MS
Marta SerranoAdminhace 5 min

La nueva integración con Stripe funciona perfectamente en staging. Podemos proceder con el despliegue a producción.

Fusión: cabecera de perfil de usuario

Avatar grande + Badge de rol + Button de acción en Card
Miembro desde enero 2024

JO
Javier Olmedo
PROVerificado

Desarrollador full-stack · Madrid, España

API#

AvatarPropsextends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>
PropTipoDefaultDescripción
srcstring—URL de la imagen.
namestring—Nombre del usuario — usado para iniciales y para tono determinista si no se pasa `tone`.
altstring—Texto alternativo (por defecto el `name`).
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'—Tamaño.
shape'circle' | 'rounded'—Forma.
toneAvatarTone—Tono del fallback. Si no se pasa, se deriva del nombre.
presence'online' | 'offline' | 'busy' | 'away'—Indicador de presencia (puntito en una esquina). Reemplaza `status` (2.0).
fallbackReactNode—Render personalizado del fallback (en lugar de iniciales).