Avatar
Componente visual para representar usuários. Suporta foto e placeholders masculino/feminino. Botão de edição disponível nos tamanhos extra grande e grande. Dark mode automático via tokens semânticos.
Variantes
Quatro tamanhos, dois perfis placeholder e botão de edição.
Carregando exemplo...
Propriedades
Classes disponíveis para configurar o avatar.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.avatar | classe | — | Base do avatar (círculo, overflow hidden). |
.avatar--xl | classe | — | 96x96px (drawer de perfil). |
.avatar--lg | classe | — | 80x80px (pré-visualização). |
.avatar--md | classe | — | 40x40px (navbar). |
.avatar--sm | classe | — | 32x32px (listas, tabelas). |
.avatar-img | classe | — | Imagem do avatar (object-fit cover). |
.avatar-wrapper | classe | — | Container para avatar + botão de edição. |
.avatar-action | classe | — | Botão de edição (28x28, bottom-right). Apenas xl e lg. |
Código
Snippets prontos para copiar e usar.
Avatar com foto
html
<div class="avatar avatar--md">
<img src="foto.jpg" alt="Nome do usuário" class="avatar-img">
</div>Tamanhos
html
<div class="avatar avatar--xl"><img src="foto.jpg" alt="" class="avatar-img"></div> <!-- 96px -->
<div class="avatar avatar--lg"><img src="foto.jpg" alt="" class="avatar-img"></div> <!-- 80px -->
<div class="avatar avatar--md"><img src="foto.jpg" alt="" class="avatar-img"></div> <!-- 40px -->
<div class="avatar avatar--sm"><img src="foto.jpg" alt="" class="avatar-img"></div> <!-- 32px -->Com botão de edição (xl e lg)
html
<div class="avatar-wrapper">
<div class="avatar avatar--xl">
<img src="foto.jpg" alt="Avatar" class="avatar-img">
</div>
<button class="avatar-action" aria-label="Editar foto">
<!-- SVG edit icon 16x16 -->
</button>
</div>Tokens utilizados
Variáveis semânticas aplicadas ao componente.
| Token | Uso |
|---|---|
--surface-base-neutral-container-emphasis | Background do botão de edição |
--surface-base-neutral-page-default | Borda do botão de edição |
--icon-base-neutral-default | Cor do ícone de edição |