Callout

한눈에#

페이지에 상주하는 권유·안내를 한 블록으로 묶는 틴트 박스입니다 — 떴다 사라지는 Alert·Toast와 달리, 팁·전제·다음 단계 안내처럼 맥락과 함께 계속 머무는 메시지에 씁니다.

패스키를 권장합니다

비밀번호는 예비 키로 남겨 두고, 일상 로그인은 패스키로 처리하면 더 안전하고 빠릅니다.

• 톤 4종
• title·icon·children
• 상시 안내(≠Alert 일시)
• 틴트 배경 + 진한 잉크 AA

틴트는 배경에만 — 잉크는 톤별 진한 토큰으로 라이트/다크 모두 대비를 지킵니다

사용 시점#

페이지에 머무는 안내면 Callout — 일시적으로 떴다 사라지거나 행동을 강제하면 다른 컴포넌트입니다.

변형#

권유

대부분의 안내는 info — 중립 권유·전제 설명에 씁니다.

확인

완료·정상 상태가 지속되는 안내에 씁니다.

주의

되돌릴 수 있으나 유의가 필요한 상황을 상주 안내합니다.

제약

차단형 Alert가 아닌, 지속되는 제약·전제 조건을 알릴 때만 씁니다.

title·icon은 선택입니다 — 본문만 줄 수도, 제목만 줄 수도 있습니다. icon은 장식으로 처리되어 보조기술에서 제외됩니다.

상태#

정적 컴포넌트라 인터랙션 상태가 없습니다(RSC). 표시 전용이며 상태/훅을 갖지 않습니다.

플레이그라운드#

Callout를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

Props#

접근성#

• 톤은 색 + title/본문 텍스트 병행으로 전달합니다 — 색만으로 의미를 구분하지 않습니다(색맹 안전)
• icon은 aria-hidden으로 장식 처리 — 의미는 항상 텍스트가 짊어집니다
• 잉크는 톤별 진한 토큰(*-text/text)이라 틴트 배경 위에서 대비를 지킵니다(틴트는 배경에만)
• 일반 div라 별도 role이 없습니다 — 동적으로 나타나는 알림이면 호출부에서 라이브 리전을 구성하세요(상주 안내는 그대로 충분)

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).

관련#