Avatar

Betav1.0.0

사용자 프로필 이미지. 이미지 로드 실패 시 fallback.

GUGRAB

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

<Avatar>
  <AvatarImage src="https://api.dicebear.com/9.x/glass/png?seed=Groudit" alt="@groudit" />
  <AvatarFallback>GU</AvatarFallback>
</Avatar>

Installation

pnpm dlx @groudit/cli@latest add avatar

Composition

Avatar
├── AvatarImage
└── AvatarFallback

Accessibility

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.1.1

Notes

•이미지에 의미 있는 alt 필수. 장식용이면 alt="".