Avatar
Avatar — a foto de uma pessoa, ou as iniciais dela quando não há foto. Use ao lado do nome em comentários, listas e perfis, para as pessoas se reconhecerem mais rápido.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no navegador, porque espera a foto carregar.
import { Avatar, AvatarGroup } from "@camaleo/react";Anatomia
Uma caixa redonda com a foto, ou com o substituto enquanto a foto carrega ou quando ela falha. O AvatarGroup sobrepõe vários deles.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Com foto
Sozinho, o avatar precisa dizer quem é. Coloque o nome da pessoa no alt, nunca "foto" ou "avatar".
Ao lado do nome
Quando o nome está logo ao lado, esconda o avatar com aria-hidden. Senão o leitor de tela fala o nome duas vezes.
- Camila Prado
sm· comentários e listas compactas - Eduardo Ramos
md· o padrão, para menus e cards - Lucas Ferreira
lg· topo de perfil
Tamanhos
Pequeno para comentários e listas compactas, médio para menus e cards, grande para o topo de um perfil. Use um tamanho só por lista.
Iniciais e ícone
Sem foto, duas iniciais já diferenciam as pessoas. Use o ícone para visitantes e contas sem nome. O alt dá nome ao avatar com a foto ou com o substituto na tela, então o leitor de tela fala o nome, não as iniciais. Quando o nome já aparece ao lado, deixe o alt vazio.
Foto que não carrega
Se a foto falhar, as iniciais continuam no lugar. Sempre passe um fallback, para um link quebrado nunca deixar um círculo vazio.
Grupo com contagem
Mostre alguns rostos e um "+3" para o resto. Dê ao grupo um nome com o total, como "7 pessoas no…", e dê um nome ao "+3" também.
Presença
Clique no botão. O status é uma palavra num badge, não só um ponto verde, e uma região de status lê a mudança em voz alta.
Em contexto
O avatar põe um rosto ao lado do que a pessoa fez. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Testei o novo layout da nota fiscal no celular. Os totais não quebram mais linha, ficou ótimo!
Lucas Ferreira
Designer de produtoCuida do fluxo de checkout e conduz os testes de usabilidade todo mês.
fix/arredondamento-notaBoas práticas
Com o nome ao lado, o avatar é enfeite: esconda do leitor de tela.
O leitor de tela fala "Foto de Mariana Lima, Mariana Lima". A repetição não acrescenta nada.
As iniciais do nome e do sobrenome diferenciam as pessoas, mesmo sem foto.
O "?" parece um erro e não diz nada sobre quem é.
Props
sm para comentários e listas compactas, md para menus e cards, lg para o topo de um perfil.Os outros atributos, como role, aria-label e aria-hidden, vão para o <span> de fora. O AvatarGroup renderiza um <div role="group"> e precisa de um aria-label.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio avatar.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- Com alt, o avatar vira uma imagem só, com o nome da pessoa (role="img"), seja a foto ou as iniciais. Ao lado de um nome visível, deixe o alt vazio para o nome não ser lido duas vezes.
- Ao lado de um nome visível, esconda o avatar com aria-hidden="true", para o nome não ser lido duas vezes.
- Dê ao AvatarGroup um nome com o total ("7 pessoas no projeto") e dê um nome ao avatar "+3" também ("e mais 3").
- Presença precisa de uma palavra, não só de um ponto colorido. Quem não enxerga a cor também precisa saber quem está online.