AlertAvatar

사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타내고자 할 때 사용합니다.

TypescriptWAI-ARIA

아바타를 구성하는 요소를 설명합니다.

Variation
사용자의 이미지를 담은 이미지 타입과, 사용자의 이미지가 존재하지 않을 때 제공하는 이니셜 타입 두 가지를 사용할 수 있습니다. 이니셜 타입 색상은 GDS Color Token 하에 자유롭게 사용 가능하나, 가독성을 고려하여 채도가 높고 명도가 낮은 색상을 권장합니다.
Alignment
라벨과 함께 아바타를 제공할 때는 기준 마진 8px을 사용합니다. 아바타와 라벨은 서로 수평에 위치해야 합니다.
Badge option
세 가지의 배지 옵션을 사이즈와 무관하게 사용할 수 있습니다. 아이콘은 쓰임에 따라 변경 가능합니다.

import { AlertAvatar } from '@goorm-dev/vapor-components';

name	description	default
className	추가적인 스타일을 적용할 클래스명
id	AlertAvatar를 감싸는 button 엘리먼트의 id
size	아바타의 크기 xllgmdsm	md
round	아바타의 모서리를 둥글게 할지 여부 boolean	true
onClick	AlertAvatar를 클릭했을 때 발생하는 이벤트
hasNewInfo	새로운 정보가 있는지 여부 boolean	false