Avatar

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O Avatar é uma representação visual de um usuário ou entidade. Ele exibe imagens de perfil, iniciais ou ícones genéricos para facilitar a identificação rápida em listas, cabeçalhos e comentários.

Diretrizes de Comportamento

Identificação Visual: Priorize o uso de fotos reais para usuários diretos. Caso a imagem não esteja disponível, utilize as iniciais do nome (máximo de duas letras).
Consistência: Utilize o formato circular como padrão para usuários humanos e formatos alternativos (como quadrados arredondados) se precisar diferenciar entidades, como transportadoras ou filiais.
Indicadores de Estado: O Avatar pode ser acompanhado de um pequeno selo (badge) para indicar disponibilidade ou status (ex: Online, Em Viagem, Indisponível).
Acessibilidade: Sempre forneça um texto alternativo (alt text) com o nome da pessoa representada para leitores de tela.

Exemplos de Escrita (Dos & Don’ts)

Contexto Logístico	Estilo Incorreto (Prolixo)	Estilo UX (Conciso/Direto)
Identificação	Foto do motorista João Silva	João Silva (como alt text)
Iniciais	J.S.P. (três letras)	JS (apenas duas letras)
Placeholder	Usuário sem foto definida	Ícone Genérico

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Initials do Storybook:

<div class="mds-avatar mds-avatar--primary mds-avatar--xxl">
  <span class="mds-avatar__text">JS</span>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`initials`	—	`JS`
`image`	—	—
`variant`	`default` `primary` `secondary` `success` `danger` `info` `warning`	`primary`
`size`	`xs` `sm` `md` `lg` `xl` `xxl`	`xxl`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo Classes

Bloco .mds-avatar

Modificadores .mds-avatar--accent .mds-avatar--accent-dark .mds-avatar--accent-light .mds-avatar--accent-lighter .mds-avatar--aqua .mds-avatar--aqua-dark .mds-avatar--aqua-light .mds-avatar--aqua-lighter .mds-avatar--blue .mds-avatar--blue-dark .mds-avatar--blue-light .mds-avatar--blue-lighter .mds-avatar--brand .mds-avatar--brand-dark .mds-avatar--brand-light .mds-avatar--brand-lighter .mds-avatar--gray .mds-avatar--gray-dark .mds-avatar--gray-light .mds-avatar--gray-lighter .mds-avatar--green .mds-avatar--green-dark .mds-avatar--green-light .mds-avatar--green-lighter .mds-avatar--lg .mds-avatar--orange .mds-avatar--orange-dark .mds-avatar--orange-light .mds-avatar--orange-lighter .mds-avatar--pink .mds-avatar--pink-dark .mds-avatar--pink-light .mds-avatar--pink-lighter .mds-avatar--primary .mds-avatar--primary-dark .mds-avatar--primary-light .mds-avatar--primary-lighter .mds-avatar--red .mds-avatar--red-dark .mds-avatar--red-light .mds-avatar--red-lighter .mds-avatar--rounded .mds-avatar--sm .mds-avatar--teal .mds-avatar--teal-dark .mds-avatar--teal-light .mds-avatar--teal-lighter .mds-avatar--xs .mds-avatar--yellow .mds-avatar--yellow-dark .mds-avatar--yellow-light .mds-avatar--yellow-lighter

Tipo	Classes
Bloco	`.mds-avatar`
Modificadores	`.mds-avatar--accent` `.mds-avatar--accent-dark` `.mds-avatar--accent-light` `.mds-avatar--accent-lighter` `.mds-avatar--aqua` `.mds-avatar--aqua-dark` `.mds-avatar--aqua-light` `.mds-avatar--aqua-lighter` `.mds-avatar--blue` `.mds-avatar--blue-dark` `.mds-avatar--blue-light` `.mds-avatar--blue-lighter` `.mds-avatar--brand` `.mds-avatar--brand-dark` `.mds-avatar--brand-light` `.mds-avatar--brand-lighter` `.mds-avatar--gray` `.mds-avatar--gray-dark` `.mds-avatar--gray-light` `.mds-avatar--gray-lighter` `.mds-avatar--green` `.mds-avatar--green-dark` `.mds-avatar--green-light` `.mds-avatar--green-lighter` `.mds-avatar--lg` `.mds-avatar--orange` `.mds-avatar--orange-dark` `.mds-avatar--orange-light` `.mds-avatar--orange-lighter` `.mds-avatar--pink` `.mds-avatar--pink-dark` `.mds-avatar--pink-light` `.mds-avatar--pink-lighter` `.mds-avatar--primary` `.mds-avatar--primary-dark` `.mds-avatar--primary-light` `.mds-avatar--primary-lighter` `.mds-avatar--red` `.mds-avatar--red-dark` `.mds-avatar--red-light` `.mds-avatar--red-lighter` `.mds-avatar--rounded` `.mds-avatar--sm` `.mds-avatar--teal` `.mds-avatar--teal-dark` `.mds-avatar--teal-light` `.mds-avatar--teal-lighter` `.mds-avatar--xs` `.mds-avatar--yellow` `.mds-avatar--yellow-dark` `.mds-avatar--yellow-light` `.mds-avatar--yellow-lighter`

Angular (mds-angular)

Seletor

mds-avatar, span[mdsAvatar]

Um avatar é uma representação visual de um usuário ou entidade.

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`variant`	`MdsAvatarVariants`	`'default'`	Variações de avatar
`autoVariant`	`boolean`	`false`	Seta a variante automática pela primeira letra
`autoVariantStyles`	`MdsAvatarVariantsStyles[]`	`['normal', 'light', 'lighter', 'dark']`	Array com opções de estilos de variantes usadas na Variante Automática
`autoVariantsBase`	`MdsAvatarVariants[]`	`['blue', 'teal', 'green', 'yellow', 'accent', 'red'…`	Array com opções cores de variantes usadas na Variante Automática
`length`	`2 \| 3`	`2`	Quantidade de caracteres na abreviação do avatar
`size`	`MdsSizes`	`'md'`	Tamanhos do avatar
`localImage`	`string \| null`	`null`	Caminho da imagem do avatar
`icon`	`MdsIconAlias \| null`	`null`	icone do avatar
`loading`	`boolean`	`false`	Loading
`description`	`string`	`''`	Descrição / Nome
`rounded`	`boolean`	`false`	Avatar arredondado
`formControl`	`UntypedFormControl \| undefined`	`undefined`	—

Visão ao vivo

Avatar — Figma (Design System 2.0) ↗

Componentes relacionados

Badge