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

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

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.5.0, @seed-design/lynx-css@0.9.0

## Preview

```tsx
import "./styles";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
      <ActionableCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
      <DismissibleCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
    </view>
  );
}
```

## 설치

- npm: npx @seed-design/cli@latest add ui:callout
- pnpm: pnpm dlx @seed-design/cli@latest add ui:callout
- yarn: yarn dlx @seed-design/cli@latest add ui:callout
- bun: bun x @seed-design/cli@latest add ui:callout

## 속성

### `Callout`

### `ActionableCallout`

### `DismissibleCallout`

## 사용법

```tsx
import { Callout } from "@/components/ui/callout";

export function App() {
  return <Callout title="알림" description="새로운 소식을 확인해 보세요." />;
}
```

## 예시

### 콘텐츠 구성

#### 텍스트만

```tsx
import "./styles";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout description={description} />
      <ActionableCallout description={description} />
      <DismissibleCallout description={description} />
    </view>
  );
}
```

#### 아이콘 포함

```tsx
import "./styles";

import IconCalendarFill from "@karrotmarket/lynx-monochrome-icon/IconCalendarFill";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout prefixIcon={<IconCalendarFill />} description={description} />
      <ActionableCallout prefixIcon={<IconCalendarFill />} description={description} />
      <DismissibleCallout prefixIcon={<IconCalendarFill />} description={description} />
    </view>
  );
}
```

#### 제목 텍스트 포함

```tsx
import "./styles";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout title="타이틀" description={description} />
      <ActionableCallout title="타이틀" description={description} />
      <DismissibleCallout title="타이틀" description={description} />
    </view>
  );
}
```

#### 링크 레이블 포함

<Callout type="warn">
  `ActionableCallout`에서는 `linkProps`를 제공하지 않습니다.
</Callout>

```tsx
import "./styles";

import { Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout description={description} linkProps={{ children: "시도해 보기" }} />
      <DismissibleCallout description={description} linkProps={{ children: "시도해 보기" }} />
    </view>
  );
}
```

#### 모든 요소 포함

```tsx
import "./styles";

import IconCalendarFill from "@karrotmarket/lynx-monochrome-icon/IconCalendarFill";

import { Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout
        title="타이틀"
        prefixIcon={<IconCalendarFill />}
        description={description}
        linkProps={{ children: "시도해 보기" }}
      />
      <DismissibleCallout
        title="타이틀"
        prefixIcon={<IconCalendarFill />}
        description={description}
        linkProps={{ children: "시도해 보기" }}
      />
    </view>
  );
}
```

### 톤

`tone`은 `neutral`, `informative`, `positive`, `warning`, `critical`, `magic`을 지원합니다. 기본값은 `neutral`입니다.

#### 중립 (기본값)

```tsx
import "./styles";

import IconCalendarFill from "@karrotmarket/lynx-monochrome-icon/IconCalendarFill";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout tone="neutral" prefixIcon={<IconCalendarFill />} description={description} />
      <ActionableCallout
        tone="neutral"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
      <DismissibleCallout
        tone="neutral"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
    </view>
  );
}
```

#### 정보

```tsx
import "./styles";

import IconCalendarFill from "@karrotmarket/lynx-monochrome-icon/IconCalendarFill";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout tone="informative" prefixIcon={<IconCalendarFill />} description={description} />
      <ActionableCallout
        tone="informative"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
      <DismissibleCallout
        tone="informative"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
    </view>
  );
}
```

#### 긍정

```tsx
import "./styles";

import IconCalendarFill from "@karrotmarket/lynx-monochrome-icon/IconCalendarFill";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout tone="positive" prefixIcon={<IconCalendarFill />} description={description} />
      <ActionableCallout
        tone="positive"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
      <DismissibleCallout
        tone="positive"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
    </view>
  );
}
```

#### 경고

```tsx
import "./styles";

import IconCalendarFill from "@karrotmarket/lynx-monochrome-icon/IconCalendarFill";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout tone="warning" prefixIcon={<IconCalendarFill />} description={description} />
      <ActionableCallout
        tone="warning"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
      <DismissibleCallout
        tone="warning"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
    </view>
  );
}
```

#### 위험

```tsx
import "./styles";

import IconCalendarFill from "@karrotmarket/lynx-monochrome-icon/IconCalendarFill";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout tone="critical" prefixIcon={<IconCalendarFill />} description={description} />
      <ActionableCallout
        tone="critical"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
      <DismissibleCallout
        tone="critical"
        prefixIcon={<IconCalendarFill />}
        description={description}
      />
    </view>
  );
}
```

#### 매직

```tsx
import "./styles";

import IconSparkle2 from "@karrotmarket/lynx-multicolor-icon/IconSparkle2";

import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

const description =
  "기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.";

export default function Example() {
  return (
    <view className="callout-preview">
      <Callout tone="magic" prefixIcon={<IconSparkle2 />} description={description} />
      <ActionableCallout tone="magic" prefixIcon={<IconSparkle2 />} description={description} />
      <DismissibleCallout tone="magic" prefixIcon={<IconSparkle2 />} description={description} />
    </view>
  );
}
```

## 웹 버전과의 차이

- 탭 이벤트는 `onClick` 대신 `bindtap` 또는 `main-thread:bindtap`으로 받습니다.
- 접근성은 HTML 의미 요소와 ARIA 대신 Lynx의 `accessibility-*` 속성을 사용합니다.
- `ActionableCallout`은 `bindtap`이 없어도 눌림 피드백과 `button` 역할을 적용합니다.

## Lynx 미지원 기능

- `asChild`를 지원하지 않습니다.
- 링크 문구는 `linkProps.children`, 탭 동작은 `linkProps.bindtap`으로 전달하세요.