사용법
크기
이미지가 없으면 fallback 이니셜을 표시해요. size와 shape로 형태를 맞출 수 있어요.
GTGTGOGTDE
스타일 커스터마이징
Avatar 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Avatar
className="shadow-md"
style={{
--gtd-avatar-bg: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Avatar
classNames={{
root: "my-avatar-root",
image: "my-avatar-image",
fallback: "my-avatar-fallback"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-avatar-bg | 폴백 배경 |
| --gtd-avatar-color | 폴백 글자색 |
| --gtd-avatar-radius | 모서리 반경 |
인터페이스
AvatarProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| src | string | — | 이미지 URL |
| alt | string | — | 대체 텍스트 |
| fallback | string | — | 이미지 없을 때 이니셜 |
| size | "xs" | "sm" | "md" | "lg" | "xl" | md | 크기 |
| shape | "circle" | "square" | circle | 형태 |
| classNames | Record<string, string> | — | 슬롯별 클래스 (root, label, input 등) |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Avatar 컴포넌트 Props 표
가져오기
import { Avatar } from "@/components/ui/Avatar";