03 · Components · 도움
콜아웃Callout
문서·도움말 본문 흐름 안에서 맥락을 잠시 멈추고 추가 정보를 강조. 대문자 레이블로 종류(참고·주의·경고·팁)를 구분합니다.
StableWCAG AA
4단계 의미
tsx
<Callout variant="info" title="참고">문서 안 부가 정보</Callout>
<Callout variant="warning" title="주의">제약이나 전제 조건</Callout>
<Callout variant="danger" title="경고">되돌릴 수 없거나 위험한 내용</Callout>
<Callout variant="success" title="팁">권장 실천</Callout>미리보기
사용 가이드
- 한 문단에 여러 Callout을 연속 배치하지 마세요. 리듬이 무너집니다.
- Alert은 페이지 상단 고정 알림, Callout은 본문 중간 강조 용도입니다.
- 제목은 기본값(참고·주의·경고·팁)을 그대로 쓰는 것이 일관성에 좋습니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "warning" | "danger" | "success" | "info" | 의미 색상. |
title | string | 생략 시 variant별 기본 레이블 사용. |