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).

AnatomiaAnatomy

1 Container (.ds-avatar) — círculo com tamanho fixo e overflow controlado.
2 Conteúdo — imagem, iniciais ou ícone de fallback.
3 Size modifier — --sm, --md ou --lg, alinhado à escala de size do DS. 1 Container (.ds-avatar) — circle with fixed size and controlled overflow.
2 Content — image, initials, or fallback icon.
3 Size modifier — --sm, --md, or --lg, aligned to the DS size scale.

Avatar com iniciaisInitials avatar

Quando nenhuma imagem esta disponível, exiba 1-2 caracteres de iniciais. Use sm, md ou lg conforme a densidade da interface.When no image is available, display 1-2 character initials. Use sm, md, or lg based on interface density.

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 Lucide como fallback genérico quando nenhuma imagem nem iniciais estao disponíveis.Use the ds-avatar--icon modifier with a Lucide icon as a generic fallback when neither image nor initials are available.

<span class="ds-avatar ds-avatar--md ds-avatar--icon" role="img" aria-label="User avatar">
  <i data-lucide="user" class="ds-icon"></i>
</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;" role="img" 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	Variável CSSCSS variable
fundo (fallback)background (fallback)	`semantic.brand.background.default`	`--ds-brand-background-default`
texto (iniciais)text (initials)	`semantic.brand.content.default`	`--ds-brand-content-default`
size (sm/md/lg)	`component.avatar.size.sm/md/lg`	`--ds-avatar-size-*` (32/40/64px)
root radius	`component.avatar.radius.default`	`--ds-avatar-radius-default`
initials font-size (sm/md/lg)	`component.avatar.initials.font-size.sm/md/lg`	`--ds-avatar-initials-font-size-*` (14/14/20px)
initials line-height (sm/md/lg)	`component.avatar.initials.line-height.sm/md/lg`	`--ds-avatar-initials-line-height-*` (20/20/32px)
initials font-weight (sm/md/lg)	`component.avatar.initials.font-weight.sm/md/lg`	`--ds-avatar-initials-font-weight-*` (700/700/600)
icon size (sm/md/lg)	`component.avatar.icon.size.sm/md/lg`	`--ds-avatar-icon-size-*` (20/24/32px)

Classes CSSCSS classes

ClasseClass	DescriçãoDescription
`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 (64px)Large size (64px)
`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.