Avatar
Representação visual de usuários ou entidades.
Avatar
Tamanhos (Sizes)
XS
SM
MD
LG
XL
Formatos (Shapes)
Indicadores de Presença (Status)
Bordas Decorativas (Rings)
Grupo de Avatares (Avatar Group)
+99
<!-- Avatar Component -->
<div class="avatar">
Avatar content here
</div>---
import Avatar from '@/components/ui/data-display/Avatar/Avatar.astro';
---
<Avatar />Variantes
rounded
rounded
Avatar circular
mask
mask
Avatar com máscara
group
group
Grupo de avatares
ring
ring
Avatar com anel
presence
presence
Indicador de presença
Uso
Quando usar
- Use Avatar para representação visual de usuários ou entidades.
- Ideal para interfaces que precisam de exibição de dados
Boas práticas
- Mantenha consistência com outros componentes da mesma categoria
- Considere acessibilidade e estados de interação
- Teste em diferentes tamanhos de tela