Avatar

Dados

Retrato ou iniciais de uma pessoa ou entidade, sobre os primitivos Radix, com fallback automático e três tamanhos.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Avatar } from "@trdr/ui/avatar"

Uso

import { Avatar, AvatarFallback, AvatarImage } from "@trdr/ui/avatar"

export function Exemplo() {
  return <Avatar />
}

Variantes

GrupoValoresPadrão
size
smdefaultlg
default

Props

AvatarPropsestende React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants>
AvatarImagePropsestende React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
AvatarFallbackPropsestende React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>

Quando usar

Use o avatar para representar visualmente uma pessoa, conta ou entidade: autor de um comentario, membro de uma equipe, contraparte de uma ordem. Ele sempre precisa de um fallback (iniciais) para o caso da imagem nao carregar, entao nunca use so a imagem sem compor com AvatarFallback.

Quando nao usar

Nao use avatar como botao de acao: se precisar de um alvo clicavel, envolva-o num elemento com o papel e o foco corretos, o avatar em si nao deve virar um botao disfarcado. Nao use avatar para logotipo de marca ou icone de produto, para isso existe iconografia dedicada (Material Symbols).

Anatomia

  • Avatar (data-slot="avatar"): a raiz circular, que recorta a imagem ou o fallback com overflow-hidden.
  • AvatarImage (data-slot="avatar-image"): a foto. So aparece depois que a imagem termina de carregar; antes disso, ou se o carregamento falhar, o fallback continua visivel por baixo (comportamento nativo do primitivo Radix, sem configuracao extra).
  • AvatarFallback (data-slot="avatar-fallback"): as iniciais sobre bg-muted, sempre presente enquanto a imagem nao esta pronta.

Tamanhos

  • sm (size-6): listas densas, linha de comentario.
  • default (size-8): uso geral, cabecalho de cartao.
  • lg (size-10): cabecalho de pagina, perfil em destaque.

Acessibilidade

O alt da AvatarImage e obrigatorio e precisa descrever a pessoa: nunca deixe vazio quando a imagem carrega (alt="" so e aceitavel quando o nome da pessoa ja aparece como texto visivel ao lado do avatar). O fallback e texto real (as iniciais), entao chega ao leitor de tela sem configuracao extra. Nao dependa so da cor de fundo do fallback para transmitir identidade.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="avatar"][data-slot="avatar-fallback"][data-slot="avatar-image"]
5 tokens usados
bg-mutedtext-b3text-b4text-b5text-muted-foreground