Avatar

사용자를 나타내는 대체(fallback) 요소를 함께 제공하는 이미지 컴포넌트예요.

출처: 문서

본문

프로필 사진처럼 이미지가 로드되기 전이나 실패했을 때 보여줄 대체 내용을 함께 구성해 주는 아바타 컴포넌트예요. 이미지가 언제 렌더링될지를 자동/수동으로 제어할 수 있어요.

Features

이미지 렌더링 시점을 자동/수동으로 제어할 수 있어요.
Fallback 파트는 어떤 children도 받아들여요.
콘텐츠가 깜빡이는 것을 막기 위해 fallback 렌더링을 선택적으로 지연시킬 수 있어요.

Anatomy

모든 파트를 임포트해 조립해요.

import { Avatar } from "radix-ui";

export default () => (
  <Avatar.Root>
    <Avatar.Image />

    <Avatar.Fallback />
  </Avatar.Root>
);

API Reference

Root

아바타의 모든 파트를 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Image

렌더링할 이미지예요. 기본적으로 로드가 완료됐을 때만 렌더링돼요. 더 세밀하게 제어하고 싶다면 onLoadingStatusChange 핸들러를 사용할 수 있어요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`onLoadingStatusChange`	`function`	No default value

Fallback

이미지가 로드되지 않았을 때 렌더링되는 요소예요. 로드 중이거나 오류가 났을 때를 의미해요. 로드 중 깜빡임이 보인다면 delayMs prop으로 렌더링을 지연시켜서, 연결이 느린 사용자에게만 보이게 할 수 있어요. 더 세밀한 제어가 필요하면 Avatar.Image에 onLoadingStatusChange 핸들러를 사용하세요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`delayMs`	`number`	No default value

Examples

클릭 가능한 아바타에 툴팁 달기

Avatar를 Tooltip과 함께 조합해서 추가 정보를 표시할 수 있어요.

import { Avatar, Tooltip } from "radix-ui";

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>
      <Avatar.Root>…</Avatar.Root>
    </Tooltip.Trigger>

    <Tooltip.Content side="top">
      Tooltip content
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Root>
);

더 알아보기 (Learn more)

Avatar.Image의 onLoadingStatusChange로 로드 상태(loading/loaded/error)를 세밀하게 추적할 수 있어요.
Fallback은 이미지 로드 실패 시 사용자 이름 이니셜 등을 보여주는 용도로 흔히 쓰여요.