Alert
사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다. 상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다.Anatomy
알럿을 구성하는 요소를 설명합니다.
Rules of Use
Icon variation
상황에 따라 왼쪽 아이콘을 변경하여 사용할 수 있습니다.
Spacing
상하 마진은 4의 배수 혹은 8의 배수를 권장합니다.
Import
import { Alert } from '@goorm-dev/vapor-components';Examples
Props
| name | description | default |
|---|---|---|
| color | color primarysuccesswarningdangerhintcontrast | primary |
| isOpen | Alert를 보여줄지 여부 | true |
| leftIcon | GDS 아이콘 컴포넌트 | |
| toggle | 닫기 버튼을 토글할 때 사용할 함수 | |
| tag | 렌더링할 컴포넌트 태그를 변경 string | |
| fade | Alert가 나타나거나 사라질 때 트랜지션을 사용할지 여부 | true |
| className | 추가적인 스타일을 적용할 클래스명 | |
| closeClassName | 닫기 버튼에 추가적인 스타일을 적용할 클래스명 | |
| closeAriaLabel | 닫기 버튼의 aria-label | |
| transition | Alert가 나타나거나 사라질 때 사용할 트랜지션 | |
| innerRef | Alert 컴포넌트의 ref |