Pular para o conteúdo
PrivateLab Design System

PersonAvatar

Gradiente em meio-tom gerado para a pessoa da Conta.

O PersonAvatar representa a pessoa que usa a Conta (o dono ou um membro): menu da conta no shell e exemplos de cadastro. É um círculo com gradiente em meio-tom (dither) gerado da semente, normalmente o e-mail. Não use para o Cliente do Pedido nem para a loja.

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

Padrão

Sementes

Cada semente dá um desenho próprio, sempre o mesmo para a mesma semente.

Tamanhos

size em pixels (padrão 40). Até 36 px a grade usa menos células para não virar ruído.

Anatomia

O PersonAvatar é um círculo com um SVG de pixels dentro, de largura e altura fixadas em style (necessário dentro de Button e Avatar do HeroUI, que forçam o tamanho do svg).

Propriedades

Animações

O PersonAvatar é estático; o selo de movimento vem do arquivo compartilhado avatars.tsx, onde só o StoreIcon anima.

Acessibilidade

  • Decorativo e aria-hidden: o nome da pessoa vem em texto ao lado.
  • Dentro de um botão (menu da conta), o nome acessível do botão é quem fala.
  • Não depende de cor para dizer nada.

Boas práticas

Faça

Usar a mesma semente (e-mail) em todos os lugares onde a pessoa aparece.

Evite

Misturar com o orbe do Cliente ou com o ícone da loja na mesma lista.
  • Use a semente estável (e-mail), não o nome, que a pessoa pode mudar.
  • Em tamanhos pequenos, prefira 24 a 36 px.
  • Para foto real, use Avatar do HeroUI.

Relacionados