Avatar
Foto de perfil redonda com fallback (iniciais). Tamanhos sm (24px), default (32px) e lg (40px); AvatarBadge de status ou ícone; AvatarGroup sobreposto com AvatarGroupCount (+3).
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Básico
Sem imagem, aparece o fallback com as iniciais.
ASBR
Tamanhos
ASASAS
Badge de status e de ícone
ASBR
Grupo com contador e ícone
ASBR
+3
CL
Com menu
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@t2-educacao/midas";Uso
<Avatar>
<AvatarImage src="/alunos/ana.jpg" alt="Ana Souza" />
<AvatarFallback>AS</AvatarFallback>
</Avatar>Se a imagem não carregar (ou não existir), aparece o AvatarFallback.
Componentes
| Componente | O que é |
|---|---|
Avatar | O círculo. size: "sm", "default" ou "lg" |
AvatarImage | A foto (src, alt) |
AvatarFallback | Texto ou ícone quando não há foto |
AvatarBadge | Indicador no canto inferior direito. variant: "status" (verde) ou "icon" (azul T2, com ícone) |
AvatarGroup | Avatares sobrepostos |
AvatarGroupCount | Círculo "+N" ou ícone no fim do grupo. size igual ao dos avatares |
Exemplos
Badge de status
<Avatar>
<AvatarImage src="/alunos/ana.jpg" alt="Ana Souza" />
<AvatarFallback>AS</AvatarFallback>
<AvatarBadge aria-label="Online" />
</Avatar>Badge com ícone
<Avatar size="lg">
<AvatarFallback>AS</AvatarFallback>
<AvatarBadge variant="icon">
<Plus />
</AvatarBadge>
</Avatar>Grupo com contador
<AvatarGroup>
<Avatar><AvatarFallback>AS</AvatarFallback></Avatar>
<Avatar><AvatarFallback>BR</AvatarFallback></Avatar>
<AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>Grupo com ícone
<AvatarGroup>
<Avatar><AvatarFallback>AS</AvatarFallback></Avatar>
<AvatarGroupCount><Plus /></AvatarGroupCount>
</AvatarGroup>Com menu
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" rounded aria-label="Minha conta">
<Avatar><AvatarImage src="/alunos/ana.jpg" alt="" /><AvatarFallback>AS</AvatarFallback></Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Perfil</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">Sair</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Acessibilidade
AvatarImageprecisa dealt(o nome da pessoa). Dentro de um botão comaria-label, usealt="".AvatarBadgede status precisa dearia-label("Online") para não depender só da cor.