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

Fallback

tsx

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

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

Sizes

default

tsx

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

Props

Prop	Type	Default	Description
`src`	`string`	-	이미지 소스 URL
`alt`	`string`	-	대체 텍스트 (이니셜 생성에도 사용)
`fallback`	`string`	-	이미지 로드 실패 시 표시할 텍스트
`size`	`"sm" \| "default" \| "lg" \| "xl"`	"default"	아바타 크기
`className`	`string`	-	추가 CSS 클래스

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 클래스

Accessibility

이미지 또는 폴백 이니셜로 표시되는 아바타입니다.

이미지에 의미가 있으면 alt 텍스트를, 장식이면 빈 alt를 제공하세요.
폴백 이니셜은 접근 가능한 이름을 대체하지 못하므로 맥락에서 이름을 함께 노출하세요.