componentes / avatar

Avatar

Foto redonda do usuário que cai para as iniciais quando não há imagem ou ela falha ao carregar.

Como usar

`name` é obrigatório: gera as iniciais (primeira e última palavras) e o rótulo acessível (`role="img"`), enquanto a imagem é decorativa. Passe `src` para uma foto; se faltar ou quebrar, aparecem as iniciais.

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" />

Tamanhos

preview

tamanhos.tsx

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

Cores

preview

primary

success

warning

danger

cores.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" />

Cor personalizada

preview

Laranja

Violeta

cor-personalizada.tsx

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

Props

Prop	Valores	Padrão	Descrição
name	string	obrigatório	Nome completo: iniciais e rótulo acessível
src	string	nenhum	URL da imagem; as iniciais aparecem se faltar ou quebrar
size	sm \| md \| lg	md	32, 40 ou 56px
radius	none \| sm \| md \| lg \| full	full	Arredondamento dos cantos
variantColor	primary \| success \| warning \| danger	nenhum	Colore o fallback de iniciais (neutro se omitido)
customColor	string \| { light, dark }	nenhum	Qualquer cor CSS (ou um par por tema) para o fallback de iniciais
(nativas)	span	nenhum	Todas as props nativas do elemento, className, ref etc.