Avatar

Identifica uma pessoa ou uma loja, com imagem ou iniciais.

O Avatar mostra a imagem de uma pessoa e, se ela faltar ou falhar, as iniciais. Ele é decorativo: o nome vem sempre em texto ao lado. Para o desenho gerado a partir do nome (Cliente, pessoa da Conta, loja sem logo), veja RecipientAvatar.

import { Avatar } from "@rastreio-x/ui";

Padrão

Tamanhos

MSMSMS

Cores

Com a variante soft, a cor dá fundo suave às iniciais. A cor identifica, mas não carrega estado.

deacsuwada

Imagem com reserva

Avatar.Image carrega a foto; enquanto não chega, ou se falhar, Avatar.Fallback aparece após delayMs.

Com nome

Rafael LimaDono da Conta

Anatomia

Avatar
├── Avatar.Fallback
└── Avatar.Image

Avatar.Image: a foto, com alt quando carrega conteúdo próprio.
Avatar.Fallback: as iniciais, de uma a duas letras.

Propriedades

Raiz (Avatar):

Avatar
Prop	Tipo	Padrão	Descrição
`asChild`	`boolean`	-	Renderiza o filho como elemento raiz, em vez de criar um novo.
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`color`	`'danger' \| 'success' \| 'default' \| 'accent' \| 'warning'`	-	Cor semântica do avatar: `default`, `accent`, `success`, `warning` ou `danger`.
`size`	`'lg' \| 'md' \| 'sm'`	-	Tamanho do componente.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.
`variant`	`'default' \| 'soft'`	-	Variante visual do componente.

Reserva (Avatar.Fallback):

Avatar.Fallback
Prop	Tipo	Padrão	Descrição
`asChild`	`boolean`	-	Renderiza o filho como elemento raiz, em vez de criar um novo.
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`color`	`'danger' \| 'success' \| 'default' \| 'accent' \| 'warning'`	-	Cor semântica do fallback: `default`, `accent`, `success`, `warning` ou `danger`.
`delayMs`	`number`	-	Atraso, em ms, antes de mostrar o fallback (evita piscar enquanto a imagem carrega).
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.

Animações

Sem movimento
indicativo

A imagem entra com um fade de opacidade em 250 ms quando termina de carregar. Com prefers-reduced-motion, o tema desliga a transição (motion-reduce).

Acessibilidade

Quando o nome está em texto ao lado, deixe o avatar decorativo (alt="" ou aria-hidden).
Se o avatar for a única identificação, dê alt com o nome da pessoa.
Iniciais em contraste mínimo de 4,5:1 com o fundo, nos dois temas.
Nunca use cor sozinha para indicar estado (por exemplo, online).

Boas práticas

Faça

Iniciais de uma ou duas letras e o nome completo ao lado.

Evite

Avatar sem nome, com cor como único diferenciador.

Use Avatar.Fallback sempre, para a imagem falhar com elegância.
Mantenha o mesmo tamanho dentro de uma lista.
Para identidade gerada pelo nome, use os avatares próprios (RecipientAvatar).

Relacionados

RecipientAvatar para o desenho gerado do Cliente.
Chip para o estado de quem o avatar representa.
Tooltip para mostrar o nome ao passar o mouse.