Avatar

󰉔

PL

Sizes

Status

계약

Overview

Machine-readable contract from Component Spec.

component: avatarexport: Avatarversion: 1attributes: data-refineui=avatar

Anatomy

Part	data-refineui
root	avatar

Variants

Axis	Values
size	xs, sm, md, lg, xl
layout	image, icon, initials

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge } from "@refineui/react";

<Avatar>
  <AvatarImage src="/user.jpg" alt="User Name" />
  <AvatarFallback>UN</AvatarFallback>
</Avatar>

<Avatar size="lg" showStatus status="online">
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>U</AvatarFallback>
  <AvatarBadge status="online" />
</Avatar>

<Avatar layout="icon" color="blue">
  <AvatarIcon name="user" />
</Avatar>

<Avatar layout="initials" color="green">
  <AvatarText>AB</AvatarText>
</Avatar>

API 레퍼런스

Avatar

Prop	Default	Type	Description
src	—	string | null	이미지 소스 URL.
alt	—	string	이미지 alt 텍스트.
layout	—	"image" | "icon" | "initials"	아바타 레이아웃(생략 시 children에서 추론).
size	"md"	"xs" | "sm" | "md" | "lg" | "xl"	아바타 크기 티어.
showStatus	false	boolean	프레즌스 상태 배지를 표시합니다.
status	—	"online" | "away" | "unavailable" | "offline"	프레즌스 상태.
color	—	AvatarColor	배경색(아이콘/이니셜용).

AvatarImage

이미지 요소.

AvatarFallback

이미지 로드 실패 시 대체 콘텐츠.

AvatarBadge

Prop	Default	Type	Description
status	—	"online" | "away" | "unavailable" | "offline"	프레즌스 상태 인디케이터.

AvatarText

이니셜용 텍스트 콘텐츠.

AvatarIcon

아이콘 레이아웃용 아이콘 요소.