Avatar
사람이나 계정을 작은 원으로 보여 줘요. 이미지를 못 불러오면 이니셜을 보여 줘요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
HPsm
HPmd
HPlg
사용법
- 이니셜 규칙한글은 이름 첫 글자, 영문은 이름·성 첫 글자예요.
- 바탕과 글자bg/subtle 위에 text/muted, radius/full이에요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| size | sm 24 · md 32 · lg 40 | md |
| src · alt | 이미지 주소와 대체 문구 | — |
| fallback | 이니셜 1~2글자 | — |
코드
tsx
<Avatar size="md" src="/me.png" alt="박형규" fallback="HP" />