Avatar

O componente de Avatar é usado para representar um usuário, empresa ou algum estado específico (como alertas ou notificações). Ele pode exibir imagens, ícones ou iniciais e é essencial para facilitar o reconhecimento visual em diferentes contextos da interface.

Variações

O componente Avatar no Acronos Design System apresenta as seguintes variações:

1. Usuário com Foto ou Ilustração

   • Avatares que exibem imagens de perfil ou ilustrações personalizadas.

   • Tamanhos disponíveis: XS, S, M, L, XL.

   • Utilizado em contextos onde o usuário é o foco, como chats, painéis ou dashboards.

2. Usuário com Cor e Iniciais

   • Utilizado quando não há uma imagem de perfil disponível.

   • Exibe a inicial do usuário com uma cor de fundo predefinida.

   • Ideal para listas ou estados genéricos.

3. Organizações/Empresas

   • Representa instituições ou grupos com um ícone específico.

   • Ícones são alinhados à identidade visual do sistema.

   • Usado em dashboards empresariais ou contextos administrativos.

4. Status/Notificações

   • Avatares com indicadores de status, como alertas, novos eventos ou notificações pendentes.

   • Cores e ícones dinâmicos para comunicar o tipo de notificação (exemplo: azul para informações, vermelho para erros).

5. Grupos de Usuários

   • Avatares que representam grupos, com um ícone de múltiplos usuários.

   • Inclui estados com cores dinâmicas e notificações.

6. Indicadores (Ex: Avaliações)

   • Avatares com ícones que indicam classificações ou conquistas, como estrelas de avaliação.

   • Usados em sistemas de feedback ou progressão.

Tamanhos Disponíveis

Os avatares são projetados para atender a diferentes contextos de uso. Os tamanhos disponíveis são:

• XS (24px)

• S (32px)

• M (40px)

• L (60px)

• XL (100px)

Cada tamanho é ajustado para garantir legibilidade e consistência visual.

Exemplos de Uso

1. Chat e Listas

   • Usar os avatares XS ou S para listas de usuários.

   • Adicionar indicadores de status, como "online/offline".

2. Dashboards e Cards

   • Utilize avatares M ou L para representar usuários, empresas ou estados.

3. Notificações e Alertas

   • Avatares com ícones de notificação para alertar o usuário sobre eventos importantes.

Boas Práticas

• Sempre use um ícone ou inicial como fallback quando a imagem do avatar não estiver disponível.

• Certifique-se de que o contraste entre a cor de fundo e o conteúdo (imagem, inicial ou ícone) seja adequado.

• Use tamanhos maiores (L ou XL) em contextos que exijam mais detalhes visuais.