Vox Mente
Navegação

Componentes

Avatar

beta

Identidade visual de uma pessoa, com iniciais quando não há foto. Em tabela, quem compõe isso com nome e contexto é o UserCell.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/avatar

Playground
AS
<Avatar>
  <AvatarFallback>AS</AvatarFallback>
</Avatar>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
AvatarGroup
  └─ Avatar
    └─ AvatarFallback
  └─ Avatar
    └─ AvatarFallback
  └─ Avatar
    └─ AvatarFallback
  └─ AvatarGroupCount

Exportadas, mas sem demonstração nesta página: AvatarImage.

Uso

Identifica uma pessoa quando não há foto — ou enquanto ela não carrega. Aqui usamos só iniciais: o produto não hospeda imagem de perfil, e um `src` quebrado documentaria uma coisa que não existe.
AS

Tamanhos

`sm` para dentro de uma célula de tabela, `lg` para cabeçalho de perfil. O texto das iniciais acompanha o tamanho sozinho.
MCMCMC

Com selo

`AvatarBadge` marca um estado sobre a foto ou as iniciais — presença online, por exemplo. Fica ancorado no canto inferior direito.
PJ

Grupo

`AvatarGroup` sobrepõe os avatares e dá o anel de destaque contra o fundo. `AvatarGroupCount` fecha a fila com o restante que não coube.
RBLMTC
+5

Composição: UserCell

Na prática, quase ninguém monta `Avatar` sozinho para identificar uma pessoa numa linha. `UserCell` já compõe o avatar com nome e uma informação secundária (e-mail, papel, escola) — é o que as tabelas do produto usam.
AS
Ana Paula de SouzaCoordenação · Escola Vila Nova

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Avatar

PropTipoPadrão
size"md" | "sm" | "lg""md"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css