Callout

페이지에 남는 안내 상자예요. 값을 입력하기 전에 알아야 할 내용, 방금 끝난 동작의 결과, 오류를 알릴 때 써요. 몇 초 뒤 사라져도 되는 알림은 Toast를 써요.

사용 예시

미리 알리는 말

3월 2일 새벽 2시부터 4시까지 점검이 있어요.

tsx

<Callout>3월 2일 새벽 2시부터 4시까지 점검이 있어요.</Callout>

성공과 실패

동작이 성공하면 success, 실패하면 danger를 써요.

사용 준비가 끝났어요.

저장 공간이 가득 차서 저장하지 못했어요. 오래된 항목을 지우고 다시 저장하세요.

tsx

<Callout color="success">사용 준비가 끝났어요.</Callout><Callout color="danger">저장 공간이 가득 차서 저장하지 못했어요. 오래된 항목을 지우고 다시 저장하세요.</Callout>

저장 공간이 가득 차서 저장하지 못했어요. 오래된 항목을 지우고 다시 저장하세요.

권장

실패한 이유와 할 일을 적으면 읽는 사람이 바로 해결할 수 있어요.

오류가 발생했어요.

지양

이유가 없으면 읽어도 할 수 있는 일이 없어요.

제목이 있는 안내

문장이 2개를 넘으면 제목을 써요. 제목만 읽어도 상황을 알 수 있어야 해요.

저장 공간이 10% 남았어요

공간이 다 차면 새 항목을 저장할 수 없어요. 오래된 항목을 지우면 공간을 되찾을 수 있어요. 지운 항목은 되돌릴 수 없어요.

tsx

<Callout color="warning" title="저장 공간이 10% 남았어요">  공간이 다 차면 새 항목을 저장할 수 없어요. 오래된 항목을 지우면 공간을 되찾을 수 있어요. 지운 항목은 되돌릴 수 없어요.</Callout>

3월 2일 새벽 2시부터 4시까지 점검이 있어요.

권장

한 문장이면 제목 없이 본문만 써요.

안내

3월 2일 새벽 2시부터 4시까지 점검이 있어요.

지양

안내, 알림 같은 제목은 읽어도 새로 알게 되는 내용이 없어요.

동작의 결과

버튼을 누른 결과를 화면에 남겨 둘 때 써요.

사용 준비가 끝났어요.

tsx

<Button color="brand" emphasis="solid" onClick={() => setDone(true)}>설정 마치기</Button><Button color="neutral" emphasis="ghost" onClick={() => setDone(false)}>되돌리기</Button>{done && (  <Callout color="success">    사용 준비가 끝났어요.  </Callout>)}

아이콘만 바꾸기

내용에 더 맞는 아이콘이 있을 때 써요. 안내의 성격이 다르면 color를 바꿔요.

3월 2일 새벽 2시부터 4시까지 점검이 있어요.

저장 공간이 10% 남았어요.

tsx

<Callout icon={<CalendarClock />}>  3월 2일 새벽 2시부터 4시까지 점검이 있어요.</Callout><Callout color="warning" icon={<HardDrive />}>  저장 공간이 10% 남았어요.</Callout>

본문의 코드 블록

문의할 때 그대로 전달해야 하는 값을 보여 줄 때 써요.

저장하지 못했어요

E-507, 2026-03-02 14:21

tsx

<Callout color="danger" title="저장하지 못했어요">  <CodeBlock code="E-507, 2026-03-02 14:21" wrap /></Callout>

컨트롤

3월 2일 새벽 2시부터 4시까지 점검이 있어요.

color

title

tsx

<Callout>  3월 2일 새벽 2시부터 4시까지 점검이 있어요.</Callout>

명세

이름
이름	값	기본
color	info, success, warning, danger	info
나타낼 의미에 맞춰 골라요.
title	ReactNode	-
본문 위에 굵은 글자로 보여요.
icon	ReactNode	color별 기본 아이콘
크기는 20px이고 색은 color에 맞춰 정해져요.
className	string	-