Avatar
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Densidade
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Icônico
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Com letra
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Com imagem
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
alt
| Atributo | alt |
| Descrição | Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade. Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: "Foto de perfil de João Silva". |
| Tipo | "Foto de perfil do usuário" |
| Valor padrão | 'Foto de perfil do usuário' |
bgColor
| Atributo | bg-color |
| Descrição | Permite definir a cor de fundo do componente. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não especificada, usa a cor padrão do tema. |
| Tipo | string |
| Valor padrão | '#DBE8FB' |
customId
| Atributo | custom-id |
| Descrição | Identificador único; gerado automaticamente quando omitido. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId('br-avatar') |
density
| Atributo | density |
| Descrição | Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Define se o avatar está desabilitado |
| Tipo | boolean |
| Valor padrão | false |
isIconic
| Atributo | is-iconic |
| Descrição | Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem). Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível. |
| Tipo | boolean |
| Valor padrão | false |
src
| Atributo | src |
| Descrição | URL da imagem a ser exibida no avatar do tipo 'fotográfico'. Deve ser uma URL válida que aponta para a imagem desejada. |
| Tipo | string |
| Valor padrão | --- |
text
| Atributo | text |
| Descrição | Conteúdo textual do avatar. Apenas o primeiro caractere será exibido em maiúscula. |
| Tipo | string |
| Valor padrão | --- |
Dependências
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
density | density | Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido. | "large" | "medium" | "small" | 'medium' |
iconic | is-iconic | Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem). | boolean | false |
image | src | URL da imagem a ser exibida no avatar do tipo 'fotográfico'. | string | --- |
name | text | Conteúdo textual do avatar. Apenas o primeiro caractere será exibido em maiúscula. | string | --- |
Eventos
🟦 Eventos renomeados
| Evento Vue | Evento Stencil | Descrição |
|---|---|---|
click | click | Evento emitido quando o avatar é clicado. |