Pular para o conteúdo
PrivateLab Design System

RecipientAvatar

Orbe de gradiente gerado pelo nome do Cliente, ao lado do nome dele.

O RecipientAvatar identifica o Cliente de um Pedido (quem compra e recebe) na lista de Pedidos, no detalhe do Pedido e no Sheet da tentativa. É um desenho gerado do nome: um orbe de gradiente suave, feito só com CSS. As três famílias de avatar gerado nunca se misturam: PersonAvatar é a pessoa da Conta e StoreIcon é a loja sem logo.

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

Padrão

O avatar é decorativo e fica aria-hidden: o nome vem sempre em texto ao lado.

Determinístico

O mesmo nome dá sempre o mesmo orbe, em qualquer tela. O desenho não é guardado: sai do texto.

Tamanhos

size é em pixels (padrão 24, o tamanho da lista de Pedidos).

Na lista de Pedidos

Anatomia

O RecipientAvatar é um elemento só: um círculo com gradiente e realce interno.

Propriedades

Animações

O RecipientAvatar é estático. O selo de movimento vem do arquivo avatars.tsx, que também define o StoreIcon (este sim anima os pixels em cascata); o orbe não usa motion.

Acessibilidade

  • Sempre decorativo (aria-hidden): o nome do Cliente vem em texto ao lado.
  • Nunca carrega estado: a cor do orbe não diz nada além de identificar.
  • Sem texto alternativo; se o avatar fosse o único identificador, a tela estaria errada.

Boas práticas

Faça

Avatar de 24 px ao lado do nome do Cliente, na mesma linha.

Evite

Usar o orbe sozinho como identificação, ou como sinal de estado (cor de atraso, por exemplo).
  • Use só para o Cliente do Pedido; pessoa da Conta e loja têm famílias próprias.
  • Tamanho igual em toda a lista.
  • Não persista o desenho: ele sai do nome e muda se o nome mudar.
  • O Cliente aparece com o nome; nunca "Destinatário".

Relacionados