componentes / exibição
Avatar
Uma foto de perfil redonda com um substituto para quando a imagem não existe.
avatar-default.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
export default function AvatarDefault() {
return (
<div className="flex items-center gap-3">
<Avatar>
<AvatarImage alt="di0rio" src="https://github.com/di0rio.png" />
<AvatarFallback>DI</AvatarFallback>
</Avatar>
<Avatar className="size-12">
<AvatarImage alt="" src="/missing-image.png" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>
<Avatar className="size-8">
<AvatarFallback>JD</AvatarFallback>
</Avatar>
</div>
);
}Instalação
$ npx shadcn@latest add https://cd-ui.vercel.app/r/avatar.jsonprimeira vez? configure o components.json e o tema antes: veja instalação.
Uso
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
<Avatar>
<AvatarImage alt="Ada Lovelace" src="/ada.png" />
<AvatarFallback>AL</AvatarFallback>
</Avatar>API
Avatar
Base UI · Avatar.RootContêiner redondo, de 40px por padrão. Mude o tamanho com className (ex.: size-12).
| prop | tipo | padrão |
|---|---|---|
classNameClasses extras, mescladas com | string | - |
AvatarImage
Base UI · Avatar.ImageA foto. Só aparece depois de carregar com sucesso.
| prop | tipo | padrão |
|---|---|---|
altDê ao | string | - |
classNameClasses extras, mescladas com | string | - |
AvatarFallback
Base UI · Avatar.FallbackAparece enquanto a imagem carrega ou se ela falhar (geralmente as iniciais).
| prop | tipo | padrão |
|---|---|---|
delayEspera (ms) antes de aparecer, para evitar um piscar em carregamentos rápidos. | number | - |
classNameClasses extras, mescladas com | string | - |
Acessibilidade
- Dê ao
AvatarImageumaltcom o nome da pessoa, ou umaltvazio quando o nome já está escrito ao lado.