Avatar
Exibe a imagem de perfil do usuário com fallback para iniciais. Construído sobre Radix UI Avatar.
import { Avatar, AvatarImage, AvatarFallback } from "@workspace/ui/components/avatar";
<Avatar>
<AvatarImage src="/avatar.jpg" alt="Nome" />
<AvatarFallback>AP</AvatarFallback>
</Avatar>Tamanhos
Varie o tamanho usando classes size do Tailwind.
APAPAPAP
Com Brand Accent Ring
Estilo usado no header do storefront (consultora).
A
AP
Fallback com Cores
Diferentes cores de fallback para distinguir usuários. Usa tokens semânticos e chart colors.
APBSCMDREM
API Reference
| Prop | Type | Default | Descrição |
|---|---|---|---|
AvatarImage.src | string | — | URL da imagem do usuário |
AvatarImage.alt | string | — | Texto alternativo da imagem |
AvatarFallback | ReactNode | — | Conteúdo exibido quando a imagem não carrega (iniciais) |
className | string | — | Classes para tamanho (size-8, size-10, size-12, size-16) |