Inline Banner
사용자가 꼭 알아야 하는 경고 메시지나 현재 상태를 전달하는 컴포넌트에요.
Installation
Props
InlineBanner
| Prop | Type | Default |
|---|---|---|
variant? | "neutralWeak" | "positiveWeak" | "informativeWeak" | "warningWeak" | "warningSolid" | "criticalWeak" | "criticalSolid" | neutralWeak |
linkProps? | InlineBannerLinkProps | - |
description? | ReactNode | - |
title? | ReactNode | - |
prefixIcon? | ReactNode | - |
ActionableInlineBanner
| Prop | Type | Default |
|---|---|---|
variant? | "neutralWeak" | "positiveWeak" | "informativeWeak" | "warningWeak" | "warningSolid" | "criticalWeak" | "criticalSolid" | neutralWeak |
description? | ReactNode | - |
title? | ReactNode | - |
prefixIcon? | ReactNode | - |
DismissibleInlineBanner
| Prop | Type | Default |
|---|---|---|
onDismiss? | (() => void) | - |
open? | boolean | - |
defaultOpen? | boolean | - |
variant? | "neutralWeak" | "positiveWeak" | "informativeWeak" | "warningWeak" | "warningSolid" | - |
description? | ReactNode | - |
title? | ReactNode | - |
prefixIcon? | ReactNode | - |
Examples
Content Layout
With Link Label
linkProps prop은 InlineBanner에서만 제공돼요.
Text Only
With Icon
With Title Text
With All
Customizable Parts
Rendering LinkInlineBanner’s Link Label as Child
Variants
Neutral Weak (Default)
Positive Weak
Informative Weak
Warning Weak
Warning Solid
Critical Weak
Critical Solid
criticalWeak과 criticalSolid variant는 InlineBanner와 ActionableInlineBanner에서만 제공돼요.
variant가 criticalWeak이나 criticalSolid인 경우 position: sticky 등을 활용하여 화면을 스크롤했을 때도 인라인 배너가 상단에 고정되도록 해 주세요.