Avatar

Quando usarWhen to use

Use avatars quandoUse avatars when

Representando um usuário, equipe ou entidade: cabecalhos de perfil, autores de comentarios, listas de membros, menus de usuário e threads de conversa.Representing a user, team, or entity: profile headers, comment authors, team member lists, user menus, and conversation threads.

Não use avatars quandoDon't use avatars when

Exibindo uma imagem de conteúdo (use <img>) ou criando um button de ícone (use Button com variante icon-only).Displaying a content image (use <img> instead) or creating an icon button (use Button with icon-only variant).

Avatar com iniciaisInitials avatar

Quando nenhuma imagem esta disponível, exiba 1-2 caracteres de iniciais. Disponível em três tamanhos: sm (32px), md (40px), lg (56px).When no image is available, display 1-2 character initials. Available in three sizes: sm (32px), md (40px), lg (56px).

JD JD JD

<span class="ds-avatar ds-avatar--sm">JD</span>
<span class="ds-avatar ds-avatar--md">JD</span>
<span class="ds-avatar ds-avatar--lg">JD</span>

Avatar com imagemImage avatar

Quando uma imagem e fornecida, ela preenche o circulo do avatar. Sempre inclua texto alt descritivo.When an image is provided it fills the avatar circle. Always include descriptive alt text.

<span class="ds-avatar ds-avatar--md">
  <img src="avatar.jpg" alt="Jane Doe's avatar">
</span>

Avatar com íconeIcon avatar

Use o modificador ds-avatar--icon com um ícone Material Symbols como fallback genérico quando nenhuma imagem nem iniciais estao disponíveis.Use the ds-avatar--icon modifier with a Material Symbols icon as a generic fallback when neither image nor initials are available.

person person person

<span class="ds-avatar ds-avatar--md ds-avatar--icon" aria-label="User avatar">
  <span class="material-symbols-outlined">person</span>
</span>

Grupo de avatarsAvatar group

Exiba múltiplos avatars juntos para representar uma equipe ou grupo de usuários.Display multiple avatars together to represent a team or group of users.

AK MR TS +3

<div style="display:flex;">
  <span class="ds-avatar ds-avatar--md" style="margin-right:-8px;border:2px solid var(--ds-surface-raised);position:relative;z-index:4;">AK</span>
  <span class="ds-avatar ds-avatar--md" style="margin-right:-8px;border:2px solid var(--ds-surface-raised);position:relative;z-index:3;">MR</span>
  <span class="ds-avatar ds-avatar--md" style="margin-right:-8px;border:2px solid var(--ds-surface-raised);position:relative;z-index:2;">TS</span>
  <span class="ds-avatar ds-avatar--md ds-avatar--icon" style="border:2px solid var(--ds-surface-raised);position:relative;z-index:1;" aria-label="3 more users">
    <span>+3</span>
  </span>
</div>

Boas práticasBest practices

JD

Faça

Forneca um fallback (iniciais ou ícone) para imagens ausentes.Provide a fallback (initials or icon) for missing images.

Não faça

Mostrar um ícone de imagem quebrada quando a origem falha ao carregar.Show a broken image icon when the source fails to load.

Mapeamento de tokensToken mapping

PropriedadeProperty	Token (semantic)	Variavel CSSCSS variable
fundo (fallback)background (fallback)	`semantic.primary.background.default`	`--ds-primary-background-default`
texto (iniciais)text (initials)	`semantic.primary.content-default`	`--ds-primary-content-default`
border-radius	`foundation.radius.9999`	`--ds-radius-9999`

Classes CSSCSS classes

ClasseClass	DescricaoDescription
`ds-avatar`	Classe base do avatarBase avatar class
`ds-avatar--sm`	Tamanho pequeno (32px)Small size (32px)
`ds-avatar--md`	Tamanho médio (40px)Medium size (40px)
`ds-avatar--lg`	Tamanho grande (56px)Large size (56px)
`ds-avatar--icon`	Variante fallback com íconeIcon fallback variant

AccessibilityAccessibility

ContextoContext	RequisitoRequirement	ImplementaçãoImplementation
Avatar decorativoDecorative avatar	Oculto da tecnologia assistivaHidden from assistive technology	`aria-hidden="true"` ou `alt=""` na imagem`aria-hidden="true"` or `alt=""` on image
Avatar significativo (link para perfil)Meaningful avatar (links to profile)	Texto alternativo descritivoDescriptive alternative text	`alt="Nome do Usuario"` na imagem`alt="User Name"` on image
Avatar com íconeIcon avatar	Nome acessível para contextoAccessible name for context	`aria-label="User avatar"` no container`aria-label="User avatar"` on container
Avatar com iniciaisInitials avatar	Conteúdo de texto e lido por leitores de telaText content is read by screen readers	Nenhum atributo extra necessarioNo extra attributes needed

Resumo dos atributos ARIAARIA attributes summary

aria-hidden="true" — use em avatars puramente decorativos (ex: ao lado de um nome de usuário visível).
alt="Nome do Usuario" — use em avatars com imagem que transmitem identidade (ex: links de perfil).
aria-label — use em avatars com ícone para descrever o usuário ou contexto.aria-hidden="true" — use on purely decorative avatars (e.g., next to a visible username).
alt="User Name" — use on image avatars that convey identity (e.g., profile links).
aria-label — use on icon avatars to describe the user or context.