componentes / avatar

Avatar

Foto redonda del usuario que vuelve a las iniciales cuando no hay imagen o falla al cargar.

Cómo usar

`name` es obligatorio: da las iniciales (primera y última palabra) y la etiqueta accesible (`role="img"`), mientras la imagen es decorativa. Pasa `src` para una foto; si falta o falla, se muestran las iniciales.

preview

Avatar.tsx

import { Avatar } from "vaiperui";
 
<Avatar name="Camila Souza" />
<Avatar name="Yuki Tanaka" src="/avatars/yuki.jpg" size="lg" />
<Avatar name="Ada Lovelace" variantColor="success" />

Tamaños

preview

tamanos.tsx

<Avatar name="Ada Lovelace" size="sm" />
<Avatar name="Ada Lovelace" size="md" />
<Avatar name="Ada Lovelace" size="lg" />

Colores

preview

primary

success

warning

danger

colores.tsx

<Avatar name="Ada Lovelace" variantColor="primary" />
<Avatar name="Ada Lovelace" variantColor="success" />
<Avatar name="Ada Lovelace" variantColor="warning" />
<Avatar name="Ada Lovelace" variantColor="danger" />

Radius

preview

none

full

radius.tsx

<Avatar name="Ada Lovelace" radius="none" />
<Avatar name="Ada Lovelace" radius="sm" />
<Avatar name="Ada Lovelace" radius="md" />
<Avatar name="Ada Lovelace" radius="lg" />
<Avatar name="Ada Lovelace" radius="full" />

Color personalizado

preview

Naranja

Violeta

color-personalizado.tsx

<Avatar name="Ada Lovelace" customColor="#ff6600" />
<Avatar name="Ada Lovelace" customColor={{ light: "#a855f7", dark: "#fde047" }} />

Props

Prop	Valores	Predeterminado	Descripción
name	string	obligatorio	Nombre completo: iniciales y etiqueta accesible
src	string	ninguno	URL de la imagen; se muestran las iniciales si falta o falla
size	sm \| md \| lg	md	32, 40 o 56px
radius	none \| sm \| md \| lg \| full	full	Redondeo de las esquinas
variantColor	primary \| success \| warning \| danger	ninguno	Colorea el fallback de iniciales (neutro si se omite)
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema) para el fallback de iniciales
(nativas)	span	ninguno	Todas las props nativas del elemento, className, ref, etc.