Callout
사용자의 주목을 끌어 중요한 정보를 강조하는 컴포넌트에요.
Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum.
Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum.
Installation
Props
Callout
| Prop | Type | Default |
|---|---|---|
tone? | "neutral" | "informative" | "warning" | "critical" | "magic" | neutral |
linkProps? | CalloutLinkProps | - |
description? | ReactNode | - |
title? | ReactNode | - |
prefixIcon? | ReactNode | - |
ActionableCallout
| Prop | Type | Default |
|---|---|---|
tone? | "neutral" | "informative" | "warning" | "critical" | "magic" | neutral |
description? | ReactNode | - |
title? | ReactNode | - |
DismissibleCallout
| Prop | Type | Default |
|---|---|---|
onDismiss? | (() => void) | - |
open? | boolean | - |
defaultOpen? | boolean | - |
tone? | "neutral" | "informative" | "warning" | "critical" | "magic" | neutral |
linkProps? | CalloutLinkProps | - |
description? | ReactNode | - |
title? | ReactNode | - |
Examples
Content Layout
Text Only
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
With Icon
icon prop은 Callout에서만 제공돼요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
With Title Text
타이틀기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
타이틀기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
With Link Label
linkProps prop은 Callout과 DismissibleCallout에서만 제공돼요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
With All
타이틀기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
Customizable Parts
Rendering Link Label as Child
Tones
Neutral (Default)
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
Informative
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
Warning
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
Critical
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
Magic
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.
기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.