Carregando…Carregando…Carregando…Carregando…User avatar with image, initials, icon, status dot, 6 sizes, 3 shapes, optional clickable/selectable mode with hover/tap animation, and a lightweight children-composition group mode.
$ npx kikitocn add avatar@/lib/utils@/lib/motionmotionimport { Avatar } from "@/components/ui/cn/avatar/Avatar";
export function AvatarExample() {
return (
<div className="flex items-center gap-3">
<Avatar
src="https://github.com/devjuanmarcos.png"
alt="Juan Marcos"
size="md"
/>
<Avatar name="Juan Marcos" size="md" />
<Avatar size="md" />
</div>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
src | string | undefined | URL da imagem |
alt | string | undefined | Texto alternativo da imagem |
name | string | undefined | Nome do usuário (gera iniciais como fallback) |
icon | ReactNode | undefined | Ícone fallback quando não há imagem nem nome |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Tamanho do avatar |
variant | 'circle' | 'rounded' | 'square' | 'circle' | Forma do avatar |
status | 'online' | 'offline' | 'away' | 'busy' | 'none' | 'none' | Indicador de presença |
onClick | () => void | — | Torna o avatar clicável (vira <button>, ganha micro-interação de hover/tap). Sem isso, continua <span> decorativo |
selected | boolean | — | Estado selecionado (anel de destaque) — só tem efeito quando `onClick` está presente |
label | string | — | Nome acessível do botão quando clicável. Recomendado sempre informar junto de `onClick` |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
Clique pra selecionar — anel de destaque + micro-interação de escala
xs · sm · md · lg · xl · 2xl
circle · rounded · square
online · offline · away · busy
initials · icon · image