Avatar
Un componente de avatar que muestra una imagen de perfil o las iniciales como fallback, con diferentes tamaños, bordes y estados.
Cargando...
import { Avatar } from "stofli-ui";Cargando...
Un avatar con imagen y otro usando la prop fallback para mostrar iniciales.
Cargando...
Cargando...
Usando la prop size: sm, md, lg y xl.
Cargando...
Cargando...
Usando las props border y radius (none, sm, md, full) para personalizar los bordes.
Cargando...
Cargando...
Usando la prop status: online, offline, away y busy.
Cargando...
Cargando...
Puedes personalizar cualquier parte del avatar usando las propiedades de className con clases de Tailwind CSS.
Cargando...
Cargando...
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
src | string | - | URL de la imagen del avatar |
alt | string | "Avatar" | Texto alternativo para la imagen |
fallback | string | - | Texto a mostrar cuando no hay imagen |
size | "sm" | "md" | "lg" | "xl" | "md" | Tamaño del avatar |
radius | "none" | "sm" | "md" | "full" | "full" | Radio de borde del avatar |
border | boolean | false | Muestra un borde alrededor del avatar |
borderColor | string | "border-zinc-200 dark:border-zinc-800" | Color del borde cuando border es true |
status | "online" | "offline" | "away" | "busy" | - | Muestra un indicador de estado |
className | string | - | Clases adicionales para el contenedor principal |
imageClassName | string | - | Clases adicionales para la imagen |
fallbackClassName | string | - | Clases adicionales para el texto de fallback |
statusClassName | string | - | Clases adicionales para el indicador de estado |
ariaLabel | string | - | Etiqueta ARIA personalizada para el avatar |
statusLabel | { online?: string; offline?: string; away?: string; busy?: string; } | { online: "En línea", offline: "Desconectado", away: "Ausente", busy: "Ocupado" } | Etiquetas ARIA para los diferentes estados |