AXIS
Components/Avatar

Avatar

사용자 또는 엔티티를 나타내는 이미지/이니셜 컴포넌트입니다.

Installation

bash
npx axis-cli add avatar

Usage

tsx
import { Avatar } from '@axis-ds/ui-react'

export function Example() {
  return (
    <Avatar
      src="https://github.com/shadcn.png"
      alt="User Name"
    />
  )
}

With Image

shadcn
Vercel
Anthropic

Fallback

JD
AK
?
tsx
// 이미지가 없을 때 이니셜 표시
<Avatar alt="John Doe" />

// 커스텀 fallback 텍스트
<Avatar fallback="JD" />

Sizes

S

sm

D

default

L

lg

X

xl

tsx
<Avatar size="sm" alt="SM" />
<Avatar size="default" alt="Default" />
<Avatar size="lg" alt="LG" />
<Avatar size="xl" alt="XL" />

Props

src
Type:string
Default:-

이미지 소스 URL

alt
Type:string
Default:-

대체 텍스트 (이니셜 생성에도 사용)

fallback
Type:string
Default:-

이미지 로드 실패 시 표시할 텍스트

size
Type:"sm" | "default" | "lg" | "xl"
Default:"default"

아바타 크기

className
Type:string
Default:-

추가 CSS 클래스