Visão geral

O Avatar exibe imagem circular com fallback para iniciais. Suporta tamanhos, badge de status e agrupamento.

Demo básica

SCMNAB

Import

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar"

Estrutura base

Envolva AvatarImage e AvatarFallback dentro de Avatar. O fallback aparece automaticamente quando a imagem falha ou ainda não carregou.

Tamanhos

O Avatar tem três tamanhos controlados pela prop size.

sm · 24px

default · 32px

lg · 40px

Tamanhos disponíveis

<Avatar size="sm">...</Avatar>
<Avatar size="default">...</Avatar>
<Avatar size="lg">...</Avatar>

Com badge de status

O AvatarBadge indica status online, notificação ou outro marcador visual no canto inferior direito.

default

offline

away

Avatar com badge de status online

<Avatar>
  <AvatarImage src="/profile.jpg" alt="Lucas" />
  <AvatarFallback>LZ</AvatarFallback>
  <AvatarBadge className="bg-success" />
</Avatar>

Grupo de avatares

AvatarGroup empilha avatares com sobreposição automática. AvatarGroupCount exibe a quantidade de itens restantes.

A1A2A3

default

B1B2B3

+12

size lg

Grupo com contagem de extras

<AvatarGroup>
  <Avatar>
    <AvatarImage src="/a.jpg" alt="Ana" />
    <AvatarFallback>AN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>BM</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+5</AvatarGroupCount>
</AvatarGroup>

Props e uso

API dos sub-componentes disponíveis no projeto.

Props principais

size

"sm" | "default" | "lg"

Tamanho do avatar: sm (24px), default (32px), lg (40px).

AvatarImage src

string

URL da imagem de perfil.

AvatarFallback

ReactNode

Texto de fallback (geralmente iniciais) exibido quando a imagem não carrega.

AvatarBadge className

string

Cor do badge via classe Tailwind: bg-success, bg-destructive, bg-warning, etc.

Acessibilidade

Sempre use o atributo alt em AvatarImage com o nome do usuário para leitores de tela.

O fallback de iniciais é puramente visual. Para acessibilidade, garanta que o nome completo do usuário esteja disponível via alt ou label contextual.

Em grupos, considere adicionar aria-label no container para descrever o conjunto de usuários.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter