Pular para o conteúdo
Faculdade PhorteDesign System

Avatar

Em andamento

Foto redonda de uma pessoa, em quatro tamanhos. Quando a foto falta ou não carrega — inclusive se falhou antes de o React chegar —, mostra as iniciais do nome (primeira e última palavra) e passa a ser uma imagem nomeada.

Função
Conteúdo
Também chamado de
foto de perfil, avatar, retrato, iniciais
Mora em
app/components/atoms/Avatar.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Com Foto
  3. Tamanhos
  4. Foto indisponível
  5. Iniciais Longas
  6. Decorativo
  7. Com presença

Quando usar

Ao lado do nome de uma pessoa — palestrante, professor, autor de depoimento.

Faça

  • Passe o name: ele dá as iniciais e, sem foto, o nome acessível.
  • Use decorativo quando o nome já está escrito ao lado — a foto fica com alt="".
  • Escolha o tamanho pela densidade: sm em listas, xl em destaque.
  • Passe presenca (disponivel ou ausente) só onde ela muda o que a pessoa faz: o tutor no chat, quem está na turma ao vivo (E116).

Evite

  • Um <img> solto no lugar do Avatar: perde o tratamento de imagem quebrada.
  • Nome acessível duplicado: foto nomeada ao lado do nome escrito faz o leitor dizer o nome duas vezes.

Quando não usar. Para várias pessoas sobrepostas, com "+N", use o AvatarGroup. Para um ícone num fundo redondo, o IconBox.

Nota de uso

Quando não usar (E64): numa lista sem espaço, ou quando o nome escrito basta — a foto sozinha não identifica ninguém. As iniciais são duas letras (primeira e última palavra do nome). O alt é o nome da pessoa, sem "foto de": o leitor já diz que é imagem. Tem tratamento de imagem quebrada. É o átomo que o EventSpeaker passou a usar em vez de um <img> solto — se você estiver desenhando uma peça com foto de pessoa, comece por aqui. Passe o name: ele dá as iniciais (primeira e última palavra) e, sem foto, o nome acessível do avatar. Quando o nome já está escrito ao lado, use decorativo — a foto fica com alt="" e o leitor não repete o nome. fallback só sobrescreve as iniciais.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Círculo — Borda de 2px `--surface`, fundo `--muted`, recorte redondo.
  2. Foto — Cobre o círculo (`object-cover`).
  3. Iniciais — Sem foto: duas letras em seminegrito, `--muted-foreground`, decorativas.
  4. Presença — Com `presenca`: o ponto no canto de baixo, fora do recorte redondo, com anel de 2px `--card` — cheio `--success` (disponível) ou vazado com borda `--muted-foreground` (ausente); 10, 12, 14 ou 16px conforme o tamanho.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Com fotoA imagem, com alt do alt ou do name (vazio se decorativo).
Sem foto ou foto quebradaAs iniciais; o círculo vira role="img" com o nome acessível.
DecorativoSem nome acessível em nenhum dos dois casos.
Tamanhosm 32px, md 40px (padrão), lg 48px, xl 64px.
DisponívelPonto cheio verde, e o nome ganha "(disponível)".
AusenteAnel vazado cinza — a forma muda, não só a cor —, e o nome ganha "(ausente)".

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
A imagem falha ao carregarTroca pelas iniciais — e troca de novo se o src mudar para um endereço que funcione.
A imagem falhou antes da hidrataçãoNa montagem, confere se ela já veio quebrada (complete com largura 0) e troca.
`fallback` com espaçoÉ tratado como nome: vira as iniciais dele; sem espaço, usa as duas primeiras letras.
Com `presenca`O avatar ganha um invólucro com o ponto (o style vai para ele, o className fica no círculo); sem a prop, nada muda — testado na ficha.

Relacionados