BaseAvatar

Mostra as iniciais de quem lançou, conferiu ou aprovou um item.

PRMCRAKS

Uso

• Passe o nome completo em name. O avatar mostra a primeira letra do primeiro e do último nome: "Maria da Silva Coelho" vira "MC". Um nome só mostra uma letra. Filho, Neto, Júnior e parecidos no fim são pulados: "Paulo Ramos Filho" vira "PR".
• Use em históricos, aprovações e no cabeçalho, sempre com o nome ou o papel da pessoa por perto, como em "Lançada por Paulo Ramos".
• O tom só ajuda a diferenciar pessoas lado a lado. Ele não indica perfil, cargo nem situação, e não é o Tone de status dos outros componentes.
• Quando o nome completo já está escrito ao lado, use decorative para o leitor de tela não ler o nome duas vezes.

Anatomia

1. Círculo: o fundo na cor de tone (blue ou pink), com 32 px ou 24 px conforme size.
2. Iniciais: a primeira letra do primeiro e do último nome de name.

Tamanhos

PRPR

Tamanho	Quando
md · 32 px	Históricos, aprovações, cabeçalho
sm · 24 px	Dentro de uma linha de texto ou de um resumo

Com o nome ao lado

RA Rui Antunes

Faça e não faça

Faça	Não faça
Ponha o nome ou o papel da pessoa perto do avatar: "Lançada por Paulo Ramos".	Use o avatar sozinho numa lista de aprovações, sem o nome.
Use decorative quando o nome completo já está escrito ao lado.	Use o tom para indicar perfil, como rosa para fiscal. O tom só separa pessoas lado a lado.

Estilo

Propriedade	Token
Fundo azul	--tj-avatar-bg
Texto azul	--tj-avatar-text
Fundo rosa	--tj-avatar-alt-bg
Texto rosa	--tj-avatar-alt-text
Contorno	2 px de --tj-layer-01, separa avatares sobre fundo colorido
Texto	--tj-text-xs (12 px) no md, 10 px no sm, peso --tj-weight-semibold
Forma	Círculo de 32 px (md) ou 24 px (sm)

Os quatro tokens de cor trocam de valor no tema escuro.

Código

<BaseAvatar name="Paulo Ramos" />
<BaseAvatar name="Marta Coelho" tone="pink" size="sm" />
<BaseAvatar name="Rui Antunes" decorative />

Propriedades

Propriedade	Tipo	Padrão	Descrição
name	string	obrigatória	Nome completo; gera as iniciais e é o nome acessível. Obrigatório
size	'sm' | 'md'	'md'	24 ou 32 px
tone	'blue' | 'pink'	'blue'	Cor de fundo, só para diferenciar pessoas
decorative	boolean	false	Esconde o avatar do leitor de tela quando o nome já está escrito ao lado

Sem eventos. O avatar não é clicável; para abrir o menu do usuário, coloque-o dentro de um botão com nome acessível. Dentro de um botão, ou ao lado do nome escrito (como no cabeçalho), use decorative: assim o nome do botão vem do texto dele ou do aria-label, e o leitor de tela não lê "Marta Coelho Marta Coelho".

<button type="button" aria-label="Menu de Marta Coelho">
  <BaseAvatar name="Marta Coelho" decorative />
</button>

Acessibilidade

• Não há padrão do WAI-ARIA APG para avatar. Ele segue o papel img da especificação WAI-ARIA: role="img" com aria-label igual ao nome completo. O leitor de tela lê "Paulo Ramos, imagem", não "P R".
• As iniciais ficam escondidas dos leitores de tela; quem lê é o nome completo.
• Com decorative, o avatar recebe aria-hidden="true" e sai da leitura, porque o nome já está no texto.
• O aria-label usa o nome sem espaços sobrando. Um nome vazio ou só com espaços não tem o que anunciar: o avatar fica escondido do leitor de tela, como no modo decorativo.
• Não recebe foco nem entra na ordem do Tab, porque não faz nada.
• A cor não carrega significado. No modo de alto contraste do Windows, o círculo ganha borda para continuar visível.
• Contraste do texto sobre o fundo: azul 15,1:1 e rosa 8,3:1 no tema claro; azul 9,1:1 e rosa 10,0:1 no tema escuro. Todos acima do mínimo de 4,5:1.
• Testado com axe em todos os tons, tamanhos, no modo decorativo e com nome vazio.