Avatar

Um elemento de imagem com fallback para representar o usuário.

Exemplos

Variantes

Fallback

Tamanhos

Com badge

API

Avatar

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
size	"sm" | "md" | "lg" | "xl"	"sm", "md", "lg", "xl"	"md"	Define o tamanho do avatar, das iniciais do fallback e do badge.
badge	number | string	-	-	Conteúdo exibido como badge no avatar (normalmente para notificações ou contadores). Fica oculto quando o valor é 0 ou vazio. Leitores de tela anunciam o badge como "N notificações" (ou "1 notificação"), como o badge do Button.
src	string	-	-	Atalho que renderiza um AvatarImage com essa URL quando nenhum children é passado.
alt	string	-	""	Texto alternativo da imagem do atalho.
fallback	React.ReactNode	-	-	Atalho que renderiza um AvatarFallback com esse conteúdo quando nenhum children é passado. Mostra o ícone de usuário quando só src é informado.
className	string	-	-	Classes CSS adicionais aplicadas ao avatar. Sem badge, o avatar é o próprio elemento raiz, e classes de layout (como ml-auto) valem nele.
containerClassName	string	-	-	Classes aplicadas ao wrapper que envolve o avatar e o badge. Só existe com badge; use para posicionar o conjunto (ex.: ml-auto numa linha flex).
children	React.ReactNode	-	-	Componentes filhos (normalmente AvatarImage e AvatarFallback).
...props	Todas as props de Avatar do Radix	-	-	Permite passar qualquer outra propriedade padrão do componente.

AvatarImage

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
src	string	-	-	URL de origem da imagem do avatar.
alt	string	-	-	Texto alternativo da imagem do avatar.
className	string	-	-	Classes CSS adicionais aplicadas à imagem do avatar.
...props	Todas as props de AvatarImage do Radix	-	-	Permite passar qualquer outra propriedade padrão do componente.

AvatarFallback

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	React.ReactNode	-	Ícone de usuário	Conteúdo exibido quando a imagem do avatar não carrega. Sem children, exibe por padrão um ícone de usuário.
className	string	-	-	Classes CSS adicionais aplicadas ao fallback do avatar.
...props	Todas as props de AvatarFallback do Radix	-	-	Permite passar qualquer outra propriedade padrão do componente.