AppAvatar

Átomos

Representa uma pessoa, empresa ou ausência de imagem com foto, iniciais ou placeholder.

Quando usar: identificar visualmente uma pessoa, equipe ou empresa em listas, cabeçalhos e comentários.

Quando não usar: a imagem é decorativa sem representar uma entidade; nesse caso, use um ícone ou ilustração.

Importar

import { AppAvatar } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppAvatar.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppAvatar.css';

Exemplos

Sizes

const Sizes = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <AppAvatar size="xs" name="João Carlos" />
    <AppAvatar size="sm" name="João Carlos" />
    <AppAvatar size="md" name="João Carlos" />
    <AppAvatar size="lg" name="João Carlos" />
    <AppAvatar size="xl" name="João Carlos" />
    <AppAvatar size="2xl" name="João Carlos" />
  </div>
);

Iniciais

const Iniciais = () => <AppAvatar name="João Carlos" />;

Placeholder

const Placeholder = () => <AppAvatar name={undefined} />;

Status

const Status = () => (
  <div style={{ display: 'flex', gap: 12 }}>
    <AppAvatar name="João Carlos" status="online" />
    <AppAvatar name="Ana Souza" status="offline" />
  </div>
);

Verificado

const Verificado = () => <AppAvatar name="João Carlos" src={avatarSvg('#E6F9F9', '#005450')} badge="verified" />;

Empresa

const Empresa = () => <AppAvatar
    name="João Carlos"
    src={avatarSvg('#E6F2FF', '#00336B')}
    badge={<span style={{ display: 'grid', width: '100%', height: '100%', placeItems: 'center', background: '#E6F9F9', color: '#005450', fontSize: 8 }}>H</span>} />;

Imagem Quebrada

const ImagemQuebrada = () => <AppAvatar name="João Carlos" src="/avatar-inexistente.svg" />;

Props

Prop	Tipo	Padrão	Descrição
`alt`	`string`	`—`	Texto alternativo da imagem. Por padrão, usa `name`.
`badge`	`ReactNode`	`—`	Selo no canto inferior direito. `verified` exibe a verificação; um nó permite o logo de uma empresa.
`name`	`string`	`—`	Nome usado para gerar as iniciais e o nome acessível do avatar.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`md`	Diâmetro do avatar. Padrão: `md`.
`src`	`string`	`—`	URL da imagem exibida no avatar. Ao falhar, exibe as iniciais ou o placeholder.
`status`	`"online" \| "offline"`	`—`	Estado de presença exibido no canto inferior direito.