03 · Components · 피드백
알림 배너Alert
페이지 흐름을 막지 않고 중요한 메시지를 전달. info / success / warning / danger 4단계 의미 색상을 제공합니다.
StableWCAG AA
의미 색상
참고
일반적인 안내 메시지. 링크를 함께 두어도 좋습니다.
완료
변경 사항이 저장되었습니다.
주의
권장 브라우저가 아닙니다. Safari 14+ 또는 Chrome 90+ 사용을 권장합니다.
오류
파일을 불러오지 못했습니다. 잠시 후 다시 시도해주세요.
사용 가이드
- 한 화면에 같은 variant의 Alert가 여러 개라면 하나로 합치세요.
- 중요도가 낮은 안내는 Callout, 일시적 메시지는 Toast를 사용합니다.
- 제목은 한 문장, 본문은 2줄을 넘지 않게 작성하세요.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "success" | "warning" | "danger" | "info" | 의미 색상. |
title | string | 상단 굵은 제목. | |
onClose | () => void | 지정 시 우측에 닫기 버튼 노출. |