Avatar
StableMoldura circular para retrato, com fallback de iniciais, badge de status, agrupamento e contagem. Composto sobre Base UI Avatar. Quase tudo o que dá errado num avatar dá errado na árvore de acessibilidade e não na tela: iniciais lidas em voz alta são letras, não uma pessoa — por isso o fallback aceita `label`, que esconde as iniciais e anuncia o nome no lugar delas.
Instalação
npx up-web-ds add avatarPreview
Default
Fallback
Sizes
With Badge
Walter Souza · online
Group
All states
Default
Walter SouzaFallback
Sizes
With Badge
Walter Souza · online
Group
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- data-display
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / avatar
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Não é interativo por si: não entra na sequência de tabulação e não anima, então teclado e movimento não têm superfície onde falhar — quando um avatar vira gatilho, quem carrega foco e alvo é o controle que o envolve. Leitor de tela verificado por teste: com imagem o nome vem do alt, que diz quem é e não o que é o arquivo; sem imagem, `label` esconde as iniciais e anuncia a pessoa, de modo que o mesmo avatar anuncia o mesmo nome tenha a foto carregado ou não; um grupo fala uma vez em vez de uma vez por rosto; e o badge de status fica fora da árvore, porque um ponto colorido não diz nada — o significado dele vive no texto ao lado. Contraste verificado nos dois temas: o aro da moldura é desenhado em pseudo-elemento com mix-blend, então ele lê como hairline sobre retratos claros e escuros em vez de sumir nos claros.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- Nenhum
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda