# Callout
URL: /components/callout
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/callout.mdx

사용자에게 중요한 정보나 팁을 시각적으로 강조하여 전달하는 메시지 컴포넌트입니다.

## Anatomy

![Callout의 Anatomy 이미지. Container, Prefix Icon, Title, Description, Link Text, Suffix Icon으로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0f516d56-e578-4619-91bd-f4930dbc99d7)

Callout은 텍스트 내용을 감싸고 있는 Container로 구성되어 있으며, 필요에 따라 Prefix Icon, Title, Link Text, Suffix Icon을 표시할 수 있습니다.

## Properties

### Interaction

![Callout의 Interaction Property - Display, Actionable, Dismissible](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f7ecf537-57ea-4fd5-bba3-109db4b8e8ed)

Callout은 정보를 표시하는 Display, 선택하여 동작을 실행할 수 있는 Actionable, 스스로를 제거할 수 있는 Dismissible 세 가지 동작을 가질 수 있습니다.

### Tone

![Callout의 Tone Property - Neutral, Informative, Warning, Critical, Positive, Magic](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f121a7f0-5e12-4b38-a20d-485f5beb9f2b)

Callout은 메시지의 목적에 따라 여섯 가지 톤을 선택하여 사용할 수 있습니다.

### Prefix Icon Property

![Callout의 Prefix Icon Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6c40d058-f8ea-458d-8565-0d0d66bc8578)

<DontImage body="아이콘은 Fill 타입을 사용해주세요." alt="Callout에 Line 타입 아이콘을 사용한 예시" />

Prefix Icon을 표시할 수 있습니다. 아이콘은 Fill 타입 사용을 권장합니다.

### Title Property

![Callout의 Title Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6f49eac2-eac1-4f62-bfda-0666cb8ac5a8)

Show Title Property로 Title을 표시할 수 있습니다.

### Link Text Property

![Callout의 Link Text Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1a767974-d8a0-4084-a135-a6425374e3a8)

<DontImage body="Actionable Callout에서는 Link Text를 사용하지 마세요." alt="Actionable Callout에서 Link Text를 사용하는 예시" />

Link Text를 표시할 수 있습니다. Container가 모두 클릭 영역인 Actionable Callout에서는 Link Text 표시를 권장하지 않습니다.

### State

![Callout의 State - Enabled, Pressed](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1c3ba8a5-b2e1-4b33-84e7-9973a104a21f)

Actionable Callout에는 Pressed 상태가 있습니다.

## Guidelines

### Title, Description, Link Text 사이 간격 표시

![Title, Description, Link Text 사이 간격 표시 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b8f13f1c-1196-4149-be24-c22643826e68)

Callout의 Title과 Link Text는 Inline 요소로, 텍스트처럼 줄을 차지하지 않고 배치됩니다.

Title과 Description 사이, 본문과 Link Text 사이의 여백은 두 번의 띄어쓰기로 표시합니다.

### 제목과 내용 작성하기

![Callout 제목과 내용 작성 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8108d9ec-073d-41c7-a731-217edce031b2)

<DontImage body="제목이 길어지지 않게 주의해주세요." alt="제목에 문장을 사용한 예시" />

Callout 제목은 알림, 안내, 새소식, 공지와 같이 그 성격을 나타내는 짧은 단어로 표시합니다. 본문은 핵심 내용만 간결하게 작성하고, 제목에서 언급한 내용을 반복하지 않도록 합니다.

### 상황에 맞는 Tone 사용하기

Callout은 Neutral, Informative, Critical, Positive, Warning, Magic 총 여섯 가지의 Tone을 제공합니다. 맥락에 알맞은 Tone을 선택하여 사용해주세요.

![Callout의 Tone 사용 예시 - Neutral, Informative](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0009c5fd-7b29-4eb7-b2e4-7ab2317269c3)

![Callout의 Tone 사용 예시 - Critical, Positive](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/56031154-1f3b-4922-bbf5-ca8b8132e328)

![Callout의 Tone 사용 예시 - Warning, Magic](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7838bf00-da9d-46ce-830e-a3970dd21b90)

| Tone            | 사용 상황                                              |
| --------------- | -------------------------------------------------- |
| **Neutral**     | 중립적이고 일반적인 메시지를 전달할 때 사용합니다.                       |
| **Informative** | 사용자의 이해를 돕기 위한 유용한 정보, 가이드, 팁 등을 제공할 때 사용합니다.      |
| **Critical**    | 심각한 오류나 즉각적인 사용자 조치가 필요한 경우 사용합니다.                 |
| **Positive**    | 사용자에게 성취, 성공, 혜택 등 긍정적인 피드백이나 격려 메시지를 전달할 때 사용합니다. |
| **Warning**     | 사용자의 행동에 주의가 필요하거나, 잠재적 문제를 사전에 알릴 때 사용합니다.        |
| **Magic**       | AI를 활용하여 특별한 경험을 주는 기능을 나타낼 때 사용합니다.               |

### Link Text를 Nudge 용도로 사용하지 않기

![Link Text 없이 Actionable Callout 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6562e1bf-582c-4140-9904-7271bdde2840)

<DontImage alt="Link Text를 Nudge 용도로 사용하는 예시" body="Link Text는 Nudge 용도로 사용하지 않습니다." />

링크는 보조적인 내용을 전달하는 용도로만 사용해주세요. 사용자의 행동을 유도하거나 상태를 강조해야 한다면 Actionable Callout을 사용하세요.

### Dismissible 인터랙션 사용하기

![Dismissible Callout 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ef90a52c-b5a9-4036-9f01-3d70ebfc70cb)

Dismissible Callout은 사용자에게 한 번만 전달해도 충분한 정보에 한해 사용하며, 경고·오류 메시지에는 사용하지 않습니다.

닫은 후에 동일한 메시지가 반복해서 표시되지 않도록 주의해주세요.

## Specification

### Callout

Component spec (JSON): /rootage/components/callout.json

### Callout Close Button

Component spec (JSON): /rootage/components/callout-close-button.json