Copiar página como Markdown para IA
Avatar
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplo(s)
Padrão
Desktop (100%)
Tablet - 768px
iPhone (iOS) - 390x844
Android - 360x800
Compartilhar URL
Mudar fundo
Abrir no StackBlitz
Tela cheia
HTML
Controles
JS
CSS
Console
Angular (Somente leitura)
React (Somente leitura)
Vue (Somente leitura)
Acessibilidade
Recolher controles e código
Formatar código
Resetar código para o estado inicial
Copiar para a área de transferência
Status
Desktop (100%)
Tablet - 768px
iPhone (iOS) - 390x844
Android - 360x800
Compartilhar URL
Mudar fundo
Abrir no StackBlitz
Tela cheia
HTML
Controles
JS
CSS
Console
Angular (Somente leitura)
React (Somente leitura)
Vue (Somente leitura)
Acessibilidade
Expandir controles e código
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 | string |
| 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 do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId(). |
| Tipo | string |
| Valor padrão | generateUniqueId() |
density
| Atributo | density |
|---|---|
| Descrição | Define a densidade visual do componente. - small: Alta densidade (componente menor, mais compacto e com menos espaçamento).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Baixa densidade (componente maior, mais espaçamento e altura). |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
|---|---|
| Descrição | Desabilita a interação com o componente. |
| Tipo | boolean |
| Valor padrão | false |
iconic
| Atributo | iconic |
|---|---|
| Descrição | Exibe a variação icônica. Quando informada, tem precedência sobre isIconic. |
| Tipo | boolean |
| Valor padrão | --- |
isIconic
| Atributo | is-iconic |
|---|---|
| Depreciação | Use iconic. |
| Descrição | |
| 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 | '' |
status
| Atributo | status |
|---|---|
| Descrição | Exibe um indicador de status no avatar. |
| Tipo | boolean |
| Valor padrão | false |
statusBgColor
| Atributo | status-bg-color |
|---|---|
| Descrição | Cor de fundo do indicador de status padrão. |
| Tipo | string |
| Valor padrão | 'rgb(22, 136, 33)' |
statusLabel
| Atributo | status-label |
|---|---|
| Descrição | Rótulo acessível do indicador de status padrão. |
| Tipo | string |
| Valor padrão | 'Status do usuário' |
statusPosition
| Atributo | status-position |
|---|---|
| Descrição | Posição do indicador de status sobre o avatar. |
| Tipo | "bottom-left" | "bottom-right" | "top-left" | "top-right" |
| Valor padrão | 'top-right' |
statusSize
| Atributo | status-size |
|---|---|
| Descrição | Tamanho do indicador de status padrão. |
| Tipo | string |
| Valor padrão | '12px' |
text
| Atributo | text |
|---|---|
| Descrição | Conteúdo textual do avatar. Apenas o primeiro caractere será exibido em maiúscula. |
| Tipo | string |
| Valor padrão | '' |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"container" | Elemento externo do avatar. |
"content" | Conteúdo interno do avatar (imagem, ícone ou texto). |
"status" | Indicador de status posicionado sobre o avatar. |
Dependências
Depende de
Gráfico
Migração de <br-avatar> (1.x → 2.x)
Na branch 1.x, o avatar era um Vue Custom Element registrado como br-avatar. Na 2.x, o nome do elemento foi preservado, mas a API foi alinhada ao padrão dos Web Components atuais.
Propriedades
| API 1.x | API 2.x | Ação na migração |
|---|---|---|
| — | alt | Informe o texto alternativo quando houver imagem. |
density | density | Mantenha o valor compatível. |
iconic | iconic | Mantenha; prefira o nome canônico atual em vez do alias legado is-iconic. |
image | src | Renomeie a propriedade. |
name | text | Renomeie a propriedade. |
Exemplo
1.x:
<br-avatar name="Maria" image="/foto.jpg" iconic></br-avatar>
2.x:
<br-avatar text="Maria" src="/foto.jpg" iconic alt="Maria"></br-avatar>
