Avatar

Exibe uma imagem de perfil com fallback automático.

GL

Utilização

index.tsx
import { Avatar, AvatarImage, AvatarFallback } from "@convertcompany/ui";

Exemplos

Com imagem

GL

Apenas fallback

GL

Tamanhos customizados

Você pode utilizar a classe size para definir tamanhos personalizados

GLGLGL

Props

PropriedadeTipo
classNameClasse CSS personalizada.
string
childrenComponentes filhos, como AvatarImage e AvatarFallback.
ReactNode
...propsDemais props herdadas do componente raiz da Radix UI.
HTMLDivElement
PropriedadeTipo
srcCaminho para a imagem do avatar.
string
altTexto alternativo da imagem.
string
classNameClasse CSS personalizada.
string
...propsDemais props da imagem.
img
PropriedadeTipo
childrenConteúdo fallback, como iniciais.
ReactNode
classNameClasse CSS personalizada.
string
...propsDemais props do fallback.
div