Avatar
Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.Property
Shape
Avatar의 모양을 설정합니다.
Size
Avatar의 크기를 설정합니다.
Examples
Fallback
이미지가 없거나 로드에 실패한 경우, alt 텍스트의 첫 글자가 자동으로 표시됩니다. 배경색은 alt 문자열을 기반으로 결정됩니다.
Custom Fallback
FallbackPrimitive에 children을 전달하여 커스텀 fallback 콘텐츠를 표시합니다.
Custom Image
children으로 Avatar.ImagePrimitive와 Avatar.FallbackPrimitive를 전달하면 각 슬롯에 직접 props를 적용할 수 있습니다. src, alt, crossOrigin 등 이미지 관련 props는 Avatar.Root에 전달하면 내부 Primitive로 자동 전달됩니다.
Props Table
Avatar.Root
Combines Avatar.ImagePrimitive and Avatar.FallbackPrimitive into a single part that shows a user's profile image, falling back to the first letter of alt when the image is missing or fails to load. Pass the primitives as children, or use imageElement or fallbackElement, to replace the image or fallback. Renders a <span> element.
| Prop | Default | Type |
|---|---|---|
shape? | square | circlesquare |
size? | md | smmdlgxl |
onLoadingStatusChange? | - | function |
className? | - | stringfunction |
fallbackElement? | - | ReactElement<AvatarFallbackPrimitive.Props> |
imageElement? | - | ReactElement<AvatarImagePrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
delay? | 0 | number |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Avatar.ImagePrimitive
Image part of the avatar that renders the profile picture. Renders an <img> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Avatar.FallbackPrimitive
Fallback shown in place of the avatar image when it fails to load or isn't provided. Shows the first letter of the alt text unless children are given, on a background color picked from alt. Renders a <span> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |