mad-avatar
Avatar circular (iniciais ou imagem).
Display visual — imagem, iniciais geradas do nome ou conteúdo customizado (slot). Usado em listas de usuários, headers, comentários, db-blocks de compartilhamento, etc.
Para o campo de upload de foto de perfil em formulário, veja <mad-avatar-field> — são dois componentes distintos.
Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
| name | string | '' |
Nome usado para gerar iniciais e tooltip |
| src | string | '' |
URL da imagem. Se informado, ignora iniciais |
| size | string | '' |
sm, '' (normal), lg, xl |
| variant | string | '' |
primary, success (cor de fundo das iniciais) |
| class | string | '' |
Classes CSS extras |
O slot (conteúdo entre as tags) sobrescreve as iniciais quando não há src — útil para colocar um ícone Lucide.
Iniciais automáticas
name="João Silva" gera JS. Pega a primeira letra do primeiro nome + a primeira letra do último nome. Nome único vira 1 letra só.
Uso básico
{{-- Iniciais a partir do nome --}}
<mad-avatar name="João Silva" />
{{-- Imagem --}}
<mad-avatar name="Maria Souza" src="uploads/avatars/maria.jpg" />
{{-- Tamanhos --}}
<mad-avatar name="Ana Costa" size="sm" />
<mad-avatar name="Carlos Lima" size="lg" variant="primary" />
<mad-avatar name="Pedro Dias" size="xl" variant="success" />
Com slot (ícone customizado)
<mad-avatar size="lg" variant="primary">
<i data-lucide="bot"></i>
</mad-avatar>
Em listas (db-blocks de compartilhamento)
<div class="mad-db-blocks-row" id="block-row-{{ $name }}-{{ $item->id }}">
<mad-avatar :name="$item->principal->name" size="sm" />
<div style="flex:1;">{{ $item->principal->name }}</div>
</div>
NUNCA fazer
{{-- ERRADO: montar avatar manualmente com div + style --}}
<div style="width:40px;height:40px;border-radius:50%;background:#888;color:#fff;">
JS
</div>
{{-- CERTO --}}
<mad-avatar name="João Silva" />
{{-- ERRADO: usar <img> direto sem fallback de iniciais --}}
<img src="uploads/avatars/joao.jpg" style="border-radius:50%;width:40px;">
{{-- CERTO: avatar com src já faz fallback se a imagem falhar --}}
<mad-avatar name="João Silva" src="uploads/avatars/joao.jpg" />