AppAvatarLabel

Moléculas

Abrir no Storybook

Exibe um avatar decorativo acompanhado do nome e de uma informação complementar.

Quando usar: apresentar uma pessoa ou empresa em listas, tabelas e campos de responsável.

Quando não usar: o nome não está disponível ou a informação precisa caber em um cartão mais completo.

Importar

import { AppAvatarLabel } 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/AppAvatarLabel.css';

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

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

Exemplos

Nome E Email

Exemplo: AppAvatarLabel, Nome E Email

const NomeEEmail = () => <AppAvatarLabel
    name="João Carlos"
    src={`data:image/svg+xml,${encodeURIComponent(`
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <rect width="64" height="64" fill="#E6F2FF"/>
        <circle cx="32" cy="27" r="13" fill="#F5C9A9"/>
        <path d="M18 27c0-12 28-15 28 0v-6c0-15-28-15-28 0z" fill="#00336B"/>
        <path d="M12 64c2-16 13-24 20-24s18 8 20 24" fill="#E6F9F9"/>
      </svg>
    `)}`}
    supportingText="joaocarlos@handson-ti.com.br" />;

So Nome

Exemplo: AppAvatarLabel, So Nome

const SoNome = () => <AppAvatarLabel
    name="João Carlos"
    src={`data:image/svg+xml,${encodeURIComponent(`
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <rect width="64" height="64" fill="#E6F2FF"/>
        <circle cx="32" cy="27" r="13" fill="#F5C9A9"/>
        <path d="M18 27c0-12 28-15 28 0v-6c0-15-28-15-28 0z" fill="#00336B"/>
        <path d="M12 64c2-16 13-24 20-24s18 8 20 24" fill="#E6F9F9"/>
      </svg>
    `)}`} />;

Tamanhos

Exemplo: AppAvatarLabel, Tamanhos

const Tamanhos = () => (
  <div style={{ display: 'grid', gap: 16 }}>
    <AppAvatarLabel size="sm" name="João Carlos" supportingText="joaocarlos@handson-ti.com.br" src={avatarSvg} />
    <AppAvatarLabel size="md" name="João Carlos" supportingText="joaocarlos@handson-ti.com.br" src={avatarSvg} />
    <AppAvatarLabel size="lg" name="João Carlos" supportingText="joaocarlos@handson-ti.com.br" src={avatarSvg} />
    <AppAvatarLabel size="xl" name="João Carlos" supportingText="joaocarlos@handson-ti.com.br" src={avatarSvg} />
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
name*	string	—	Nome visível da pessoa ou empresa.
alt	string	—	Texto alternativo da imagem do avatar.
badge	ReactNode	—	Selo exibido no avatar.
size	"sm" | "md" | "lg" | "xl"	md	Tamanho do avatar e da tipografia. Padrão: md.
src	string	—	URL da imagem exibida no avatar.
status	"online" | "offline"	—	Estado de presença exibido no avatar.
supportingText	string	—	Informação complementar, como cargo ou e-mail.