# 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 { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <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>
    </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`

## 사용법

설치한 스니펫은 기본 `Callout`, 전체 영역을 탭할 수 있는 `ActionableCallout`, 닫을 수 있는 `DismissibleCallout`을 내보냅니다.

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

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

저수준 조합이 필요하면 `@seed-design/lynx-react`의 컴파운드 API를 직접 사용할 수 있습니다.

```tsx
import { Callout } from "@seed-design/lynx-react";

export function App() {
  return (
    <Callout.Root tone="informative">
      <Callout.Content>
        <Callout.Title>알림</Callout.Title>
        <Callout.Description>새로운 소식을 확인해 보세요.</Callout.Description>
      </Callout.Content>
    </Callout.Root>
  );
}
```

## 예시

### 콘텐츠 구성

#### 텍스트만

```tsx
import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <view className="callout-preview">
        <Callout description={description} />
        <ActionableCallout description={description} />
        <DismissibleCallout description={description} />
      </view>
    </view>
  );
}
```

#### 아이콘 포함

```tsx
import "./styles";

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

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <view className="callout-preview">
        <Callout prefixIcon={<IconCalendarFill />} description={description} />
        <ActionableCallout prefixIcon={<IconCalendarFill />} description={description} />
        <DismissibleCallout prefixIcon={<IconCalendarFill />} description={description} />
      </view>
    </view>
  );
}
```

#### 제목 텍스트 포함

```tsx
import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <view className="callout-preview">
        <Callout title="타이틀" description={description} />
        <ActionableCallout title="타이틀" description={description} />
        <DismissibleCallout title="타이틀" description={description} />
      </view>
    </view>
  );
}
```

#### 링크 레이블 포함

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

```tsx
import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <view className="callout-preview">
        <Callout description={description} linkProps={{ children: "시도해 보기" }} />
        <DismissibleCallout description={description} linkProps={{ children: "시도해 보기" }} />
      </view>
    </view>
  );
}
```

#### 모든 요소 포함

```tsx
import "./styles";

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

import { useSeedClassName } from "@seed-design/lynx-react";
import { Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <view className="callout-preview">
        <Callout
          title="타이틀"
          prefixIcon={<IconCalendarFill />}
          description={description}
          linkProps={{ children: "시도해 보기" }}
        />
        <DismissibleCallout
          title="타이틀"
          prefixIcon={<IconCalendarFill />}
          description={description}
          linkProps={{ children: "시도해 보기" }}
        />
      </view>
    </view>
  );
}
```

### 톤

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

#### 중립 (기본값)

```tsx
import "./styles";

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

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <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>
    </view>
  );
}
```

#### 정보

```tsx
import "./styles";

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

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <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>
    </view>
  );
}
```

#### 긍정

```tsx
import "./styles";

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

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <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>
    </view>
  );
}
```

#### 경고

```tsx
import "./styles";

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

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <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>
    </view>
  );
}
```

#### 위험

```tsx
import "./styles";

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

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <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>
    </view>
  );
}
```

#### 매직

```tsx
import "./styles";

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

import { useSeedClassName } from "@seed-design/lynx-react";
import { ActionableCallout, Callout, DismissibleCallout } from "@/components/ui/callout";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-callout-root`}>
      <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>
    </view>
  );
}
```

## 웹 버전과의 차이

| 영역    | React                   | Lynx                             |
| ----- | ----------------------- | -------------------------------- |
| 엘리먼트  | `div`, `span`, `button` | `view`, `text`                   |
| 이벤트   | `onClick`               | `bindtap`, `main-thread:bindtap` |
| 접근성   | HTML 의미 요소, ARIA        | `accessibility-*`                |
| 다형성   | `asChild` 지원            | 미지원                              |
| 링크 밑줄 | `text-decoration`       | Lynx 프리셋 제약으로 테두리 기반 표현          |

Lynx에서는 탭할 수 있는 `Root`를 누르는 동안 `pressed` Recipe variant를 적용합니다. `Callout.Link`는 기본적으로 `accessibility-traits="link"`를 사용합니다. 탭할 수 있는 `Root`와 `CloseButton`에는 `button` 역할을 적용합니다.

## Lynx 미지원 기능

- `asChild`: Lynx에는 DOM Slot 기반 다형 렌더링이 없습니다.
- 링크 레이블을 자식 요소로 렌더링: `asChild` 대신 링크 문구를 `linkProps.children`에 전달하고 탭 동작은 `linkProps.bindtap`으로 처리하세요.